当文本长度不同时，如何在列中设置固定按钮位置？

Question

我有两列，但里面的文本长度不同。因此按钮不在一行中。我使用引导程序 4。 我试过了：

• 固定高度，在移动视图中也是如此，但文本超出了白色背景。
• Bootstrap CSS button fixed position after text
• 与https://v4-alpha.getbootstrap.com/utilities/flexbox/
• Responsive equal height columns in rows with CSS3/HTML5 Only

• https://css-tricks.com/fluid-width-equal-height-columns/

  This is how it looks like:

这是我的代码：

.boxes {
  background-color: #fff;
  padding: 20px;
  margin: 40px 0 40px 0;
}

.boxes ul {
  list-style: none;
}

.boxes ul li {
  padding: 8px 0 8px 0;
  text-align: left;
}

.boxes h1 {
  text-transform: uppercase;
}

.space {
  letter-spacing: 2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<section class="section section--relative parallax-background" style="background-image: url(images/hhhh.jpg);">
  <div class="container">
    <div class="row ">
      <div class="col-sm-6">
        <div class="boxes">
          <h1 class=" text-center text-shadow">Lorem Ipsum</h1>
          <ul class="space default-text ">
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është shtypshkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është rintimit dhe shtypshkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum printimit dhe shtypshkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum shtypshkronjave.s</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një printimit dhe shtypshkronjave.)</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Loremkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum ëspshkronjave.a</li>
          </ul>
          <button type="button" class="btn btn-danger btn-lg btn-block">ipsum 4545455</button>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="boxes ">
          <h1 class=" text-center text-shadow">Lorem Lorem</h1>

          <ul class="space default-text secondbox">
            <li> <i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum është një tekst shabllon i ind së printimit dhe shtypshkronjave.a</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum është një tekstë së printimit dhe shtypshkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një tekst shabllon i industrisë së printimit dhe shtypshkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum ësnjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum është një tekst shabllon rintimit dhe shtypshkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një tekste.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një tekst shabllon i inprintimit dhe shtypshkronjave.</li>

          </ul>
          <button type="button" class="btn btn-danger btn-lg btn-block">lorem 500000</button>
        </div>
      </div>
    </div>
  </div>


</section>

Answer 1

由于您使用的是 Bootstrap 4，因此您可以使用 flexbox 类来解决这个问题。

首先，将align-items-stretch (align-items:stretch;) 添加到row。然后将col-xm-6 和boxes 组合成一个元素，并将d-flex flex-column justify-content-sm-between 类添加到同一个元素（display:flex; flex-flow:column; justify-content:between;）。最后，将mt-auto (margin-top:auto;) 添加到button 元素中，以最大化其上方的空间并将其强制到列的底部。

.boxes {
  background-color: #fff;
  padding: 20px;
  margin: 40px 0 40px 0;
}

.boxes ul {
  list-style: none;
}

.boxes ul li {
  padding: 8px 0 8px 0;
  text-align: left;
}

.boxes h1 {
  text-transform: uppercase;
}

.space {
  letter-spacing: 2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<section class="section section--relative parallax-background" style="background-image: url(images/hhhh.jpg);">
  <div class="container">
    <div class="row align-items-stretch">
      <div class="col-sm-6 boxes d-flex flex-column justify-content-sm-between">
        <h1 class=" text-center text-shadow">Lorem Ipsum</h1>
        <ul class="space default-text ">
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është shtypshkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është rintimit dhe shtypshkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum printimit dhe shtypshkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum shtypshkronjave.s</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një printimit dhe shtypshkronjave.)</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Loremkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum ëspshkronjave.a</li>
        </ul>
        <button type="button" class="btn btn-danger btn-lg btn-block mt-auto">ipsum 4545455</button>
      </div>
      <div class="col-sm-6 boxes d-flex flex-column justify-content-sm-between">
        <h1 class=" text-center text-shadow">Lorem Lorem</h1>

        <ul class="space default-text secondbox">
          <li> <i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum është një tekst shabllon i ind së printimit dhe shtypshkronjave.a</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum është një tekstë së printimit dhe shtypshkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një tekst shabllon i industrisë së printimit dhe shtypshkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum ësnjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum është një tekst shabllon rintimit dhe shtypshkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një tekste.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një tekst shabllon i inprintimit dhe shtypshkronjave.</li>

        </ul>
        <button type="button" class="btn btn-danger btn-lg btn-block mt-auto">lorem 500000</button>
      </div>
    </div>
  </div>


</section>