Question

请参阅代码剪切：我正在尝试将div与＆＃34;了解更多＆＃34;无论前一个div的高度如何，在相同垂直高度的列底部。

重复免责声明：我一直在关注How can I make Bootstrap columns all the same height?和How can I make Bootstrap 4 columns all the same height?，这似乎是一个类似的问题。然而，这些解决方案并不适用于我，因为它们主要用于BS3（例如我尝试使用class =＆＃34; row-eq-height＆＃34;），而关于BS4的大多数答案都意味着相同的高度是BS4中的默认值。

然而，正如您可以从红色边框看到的那样，只有外柱高度被拉伸＆＃34;默认情况下，内部仅等于文本高度。我很困惑。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

引导程序中的列不是display: flex，这就是align-items-end无效的原因。将类d-flex和flex-column添加到列类中。添加了课程.flex-1并将其放在您的上层。

* {
  border: 1px solid red !important;
}

.body-block-3 {
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
}

.flex-1 {
  flex: 1;
}

<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>

编辑：还想提一下你可以使用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>

然而，您的上部div不会占用整个空间（拉伸），不确定这是否与您的用例有关。如果没有，您将不必创建任何新类，并且将关注bootstrap的with align-item section

上的文档

编辑：更新了.body-block-3类

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

1 个答案: