Bootstrap 4 div高度未扩展以适合内容答案

【问题标题】：Bootstrap 4 div height not expanding to fit contentBootstrap 4 div高度未扩展以适合内容
【发布时间】：2019-12-23 07:16:10
【问题描述】：

我在一个角度应用程序中使用 bootstrap 4 来尝试创建一个包含多个嵌套框的网格，第二列有 2 行，底部需要始终垂直对齐底部，理想情况下它应该是这样的：

（我通过添加一堆 br 标签实现了这一点）

但是，实际上，contect 重叠它很小，看起来像这样：

这是我用来对齐 bottom div 的 css：

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-12 mb-3 border border-secondary rounded">
    <div class="row">
      <div class="col-2 p-2">
        ABC123<br> Text
        <br> More Text
      </div>

      <div class="col-5 border-right border-left border-secondary">
        <div class="col-12 p-2">
          <a [routerLink]="['/tickets', ticket.id]">Lorem Ipsum</a><br> This is a fake text<br>This is a fake text<br>This is a fake text<br>This is a fake text<br>
        </div>
        <div class="col-12 border-top border-secondary bottom">
          <div class="row">
            <div class="col-4 p-2">bottom-align</div>
            <div class="col-4 p-2 border-left border-right border-secondary">bottom-align</div>
            <div class="col-4 p-2">bottom-align</div>
          </div>
        </div>
      </div>
      <div class="col-3 p-2 border-right border-secondary">Test</div>
      <div class="col-2 p-2 text-center">Test</div>
    </div>
  </div>
</div>

到目前为止，我尝试的一切都失败了，请指教。

谢谢

【问题讨论】：

您是否尝试在第 2 列中提及第一行的高度？

标签： html css bootstrap-4 grid height

【解决方案1】：

不需要额外的 CSS。 使用 Bootstrap 实用程序类将内行设置为“h-100”，然后使用“mt-auto”将内容推送到底部... p>

           <div class="col-5 border-left border-right border-secondary">
                  <div class="row h-100">
                        <div class="col-12 p-2">
                            <a [routerlink]="['/tickets', ticket.id]">Lorem Ipsum</a>
                            <br> This is a fake text
                            <br>This is a fake text
                            <br>This is a fake text
                            <br>This is a fake text
                        </div>
                        <div class="col-12 border-top border-secondary mt-auto">
                            <div class="row">
                                <div class="col-4 p-2">bottom-align</div>
                                <div class="col-4 p-2 border-left border-right border-secondary">bottom-align</div>
                                <div class="col-4 p-2">bottom-align</div>
                            </div>
                        </div>
                  </div>
           </div>

https://www.codeply.com/go/rxzugvCk80

【讨论】：

【解决方案2】：

你删除css：

.bottom {
    position:absolute;
    bottom:0;
    left:0;
}

和替换如示例所示：添加 display 类。并添加 container-fluid 类作为结果。

.display{
  display:flex;
  flex-direction: column;
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container-fluid">
<div class="row">
  <div class="col-12 mb-3 border border-secondary rounded">
    <div class="row">
        <div class="col-2 p-2 ">
            ABC123<br>
            Text<br>
            More Text
        </div>

        <div class="col-5 border-right border-left border-secondary bootom">
          <div class="row">
          <div class="col-12 p-2 display">
              <a [routerLink]="['/tickets', ticket.id]">Lorem Ipsum</a>
              <span>This is a fake text</span> 
<span>This is a fake text</span> 
<span>This is a fake text</span>
            
          </div>
          <div class="col-12 border-top border-secondary bottom">
              <div class="row">
                <div class="col-4 p-2">bottom-align</div>
                <div class="col-4 p-2 border-left border-right border-secondary">bottom-align</div>
                <div class="col-4 p-2">bottom-align</div>
              </div>
          </div>
          </div>
        </div>
        <div class="col-3 p-2 border-right border-secondary">Test</div>
        <div class="col-2 p-2 text-center">Test</div>
    </div>
  </div>
</div>
   </div>

【讨论】：

【解决方案3】：

我试图复制它，使用 flex 而不是 <br> 标签。这是您想要实现的目标吗？

.text-container {
  display: flex;
  flex-direction: column;
}

<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

<div class="row">
  <div class="col-12 mb-3 border border-secondary rounded">
    <div class="row">
      <div class="col-2 p-2">
        ABC123<br />
        Text<br />
        More Text
      </div>

      <div class="col-5 border-right border-left border-secondary p-0">
        <div class="col-12 p-2 text-container">
          <a [routerLink]="['/tickets', ticket.id]">Lorem Ipsum</a><br />
          <span>This is a fake text</span>             
        </div>
        <div class="col-12 border-top border-secondary bottom">
          <div class="row">
            <div class="col-4 p-2">bottom-align</div>
            <div
              class="col-4 p-2 border-left border-right border-secondary"
            >
              bottom-align
            </div>
            <div class="col-4 p-2">bottom-align</div>
          </div>
        </div>
      </div>
      <div class="col-3 p-2 border-right border-secondary">Test</div>
      <div class="col-2 p-2 text-center">Test</div>
    </div>
  </div>
</div>

【讨论】：

@XxSTREKxX 是的，如果我们不想使用<br> 标签
我尝试了这个解决方案，由于某种原因，它与原始结果完全相同。我认为它可能是某个父类，所以我尝试在 app.component.html 中添加它，但它不起作用，有什么想法吗？
@Mankind1023 可能是由于 index.css 或 app.css 中的一些全局 css。您是否使用开发者工具检查元素的样式属性？