Bootstrap 4 将 div 与具有不同高度的列中的另一个 div 的底部对齐

Question

Bootstrap 4 将 div 与具有不同高度的列中的另一个 div 的底部对齐

tea*_*low 1 css twitter-bootstrap bootstrap-4

请参阅代码片段：无论前一个 div 的高度如何，我都试图将 div 与列底部的“了解更多”以相同的垂直高度对齐。

重复免责声明：我一直在研究如何使 Bootstrap 列的高度都相同？以及如何使 Bootstrap 4 列的高度都相同？这似乎是一个类似的问题。但是，这些解决方案对我不起作用，因为它们主要用于 BS3（例如，我尝试了 class="row-eq-height" 的示例），并且大多数关于 BS4 的答案都暗示 BS4 中的等高是默认值。

但是，正如您从红色边框中看到的那样，默认情况下只有外列高度“拉伸”到底部，内列高度仅等于文本高度。我很困惑。

* { border: 1px solid red !important; }

Run Code Online (Sandbox Code Playgroud)

<head>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"  integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
   
  </head>
  <body>
    <div class="row text-center no-gutters">
        <div class="col-sm-4">
          <div>
            <h4>Components and examples</h4>
            <p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
          </div>
          <div class="align-items-end">
            <a href="">Learn more 1</a>
          </div>
        </div>
         <div class="col-sm-4">
          <div>
            <h4>Components and examples</h4>
            <p class="body-block-3 mx-auto">one line text example</p>
          </div>
          <div class="align-items-end">
            <a href="">Learn more 2</a>
          </div>
        </div>
         <div class="col-sm-4">
          <div>
            <h4>Components and examples</h4>
            <p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
          </div>
          <div class="align-items-end">
            <a href="">Learn more 3</a>
          </div>
        </div>
      </div>
      </body>

Run Code Online (Sandbox Code Playgroud)

此外，我尝试了各种 Bootstrap 对齐选项，例如使用“align-items-stretch”拉伸中间 div 并为最后一个 div 使用“d-flex align-items-end”。什么都行不通。

Answer 1

Dav*_*Lee 5

bootstrap 中的列不是display: flex，这就是align-items-end它不起作用的原因。添加类d-flex和flex-column到您的列类。添加该类.flex-1并将其放在您的上层 div 上。

* {
  border: 1px solid red !important;
}

.body-block-3 {
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
}

.flex-1 {
  flex: 1;
}

Run Code Online (Sandbox Code Playgroud)

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

</head>

<body>
  <div class="row text-center no-gutters">
    <div class="col-sm-4 d-flex flex-column">
      <div class="flex-1">
        <h4>Components and examples</h4>
        <p class="body-block-3">multiple line text example random text should break across multiple lines</p>
      </div>
      <div>
        <a href="">Learn more 1</a>
      </div>
    </div>
    <div class="col-sm-4 d-flex flex-column">
      <div class="flex-1">
        <h4>Components and examples</h4>
        <p class="body-block-3">one line text example</p>
      </div>
      <div>
        <a href="">Learn more 2</a>
      </div>
    </div>
    <div class="col-sm-4 d-flex flex-column">
      <div class="flex-1">
        <h4>Components and examples</h4>
        <p class="body-block-3">multiple line text example random text should break across multiple lines</p>
      </div>
      <div>
        <a href="">Learn more 1</a>
      </div>
    </div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

编辑：还想提到您可以使用 boostrap 实用程序类mb-auto而不是flex-1

    <div class="col-sm-4 d-flex flex-column">
      <div class="mb-auto">
        <h4>Components and examples</h4>
        <p class="body-block-3">one line text example</p>
      </div>
      <div>
        <a href="">Learn more 2</a>
      </div>
    </div>

Run Code Online (Sandbox Code Playgroud)

但是，您的上 div 不会占用整个空间（拉伸），不确定这是否是您的用例的问题。如果没有，您将不必创建任何新类，并且将遵循 bootstrap 上的文档和 align-item 部分

编辑：为.body-block-3班级更新

归档时间：	8 年，1 月前
查看次数：	3665 次
最近记录：	8 年，1 月前