不响应的行列

Question

不响应的行列

4

我正在尝试在一条线上实现数据，但是当我缩小尺寸时，图像无法完全填充类别，时间也会下降。

已经尝试在类中放置最大和最小高度，解决了图像的问题，但文本仍然下移，即16:00位置。

有人可以帮我解决这个问题吗？

<div class="row">
    <div class="col-xs-6 checkbox">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
    </div>
    <div class="Notification">
        <div class="col-sm-1" style="padding-left: 0px;">
            <div class="Imagem">
            </div>
        </div>
        <div class="col" style="line-height: 58px;">
            description
        </div>
        <div class="col col-lg-2" style="line-height: 58px;">
            DD/MM/YYYY 16:00
        </div>
        <div class="col-sm-1" style="line-height: 58px;">
            !
        </div>
    </div>
</div>

- Paul sk

已解决图像问题，但文本仍然掉落 :( - Paul sk

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Minal Chauhan · Answer 1

你需要在 col 类中进行更改：

.Notification {
    width: 100%;
    position: relative;
    margin: 26px 158px;
    background: #F9F9F9;
    /* padding-left: 25px; */
    /* padding: 1em 1em 1em 2em; */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 20px #BCBCCB47;
    border-radius: 8px;
    display: flex;
  }

  .Imagem{
    width: 100%;
    height: 100%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    background: transparent url('data:image/png;base64,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') 0% 0% no-repeat padding-box;
    border-radius: 7px 0px 0px 7px;
    padding-left: 0px;
  }

  .checkbox{
    position: absolute;
    padding-top: 17px;
    margin-left: 88px;
    margin-top: 23px;
  }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row">
  <div class="col-xs-6 checkbox">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
  </div>
  <div class="Notification">
  <div class="col-sm-2 col-lg-1" style="padding-left: 0px;">
    <div class="Imagem"></div>
  </div>
  <div class="col col-sm-2" style="line-height: 58px;">
    description
  </div>
  <div class="col text-right" style="line-height: 58px;">
    DD/MM/YYYY 16:00
  </div>
  <div class="col-sm-1" style="line-height: 58px;">
  !
  </div>
</div>

这里有一个工作示例：https://jsfiddle.net/xnaopqm8/1/

- Donada · Answer 2

你应该在行内给你的“col”类赋值。例如：

<div class="row Notification">
      <div class="col-sm-1 checkbox">
         <input type="checkbox" class="form-check-input" id="exampleCheck1">
     </div>
   <div class="col-sm-3" style="padding-left: 0px;">
     <div class="Imagem">
     </div>
     </div>
   <div class="col-sm-4" style="line-height: 58px;">
      description
     </div>
   <div class="col-sm-3" style="line-height: 58px;">
       DD/MM/YYYY 16:00
     </div>
   <div class="col-sm-1" style="line-height: 58px;">
        !
     </div>
  </div>