引导程序设置列的高度和间距

Question

我想动态填充块。 实际上，会有一个for循环来发送数据。但是，在使用 bootstrap 4 时，在不同屏幕尺寸下其高度存在一些问题。我希望在调整大小时各列之间的高度彼此相同（在最大高度限制内采用最长的高度），因为文本在较小的窗口尺寸上被压入多余的行。 问题：

理想的结果： 任何提示将非常感谢！

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <!--BLOCK-->
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3">
            <h3>Title</h3>
            <p>Lorem ipsum dolor </p>
            <div class="align-self-center mb-3">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!--BLOCK ends-->
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3">
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3">
            <h3>Title</h3>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
  </div>
</div>

Answer 1

您几乎很好，因为列的高度已经相等，但是里面的内容并未填充所有空格。您可以像下面那样调整代码

请注意使用static func toByteArray<T>(_ value: T) -> [UInt8] { var value = value return withUnsafeBytes(of: &value) { Array($0) } } let value = NSDecimalNumber(string: "...") let bytes = toByteArray(value.uint64Value) （h-100）height:100%（flex-fill）和flex:1 1 auto（mt-auto）类

margin-top:auto

Answer 2

只需将mt-auto类添加到您的按钮即可，因为列的高度相同，这将解决您的问题

<div class="align-self-center mb-3 mt-auto">
              <button class="btn btn-success">View More</button>
            </div>

Answer 3

我遇到了同样的问题，我用一个小脚本解决了

您必须在带有信息的容器上使用它

工作原理 1.获取所选容器类的所有高度div 2.得到哪个高度最高 3.应用于所有具有相同高度的同一类别的所有容器。

<script>
        var elementHeights = $('.desctext').map(function() {
        return $(this).height();
        }).get();

        var maxHeight = Math.max.apply(null, elementHeights);

        $('.desctext').height(maxHeight);
      </script>

希望这对您有用