提问者:小点点

引导设置列高度和间距[重复]


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

共3个答案

匿名用户

您的表现几乎不错,因为该列的高度已经相等,但其中的内容并没有填满所有的空间。您可以像下面这样调整代码

请注意使用类h-100高度: 100%flex-填充flex: 1 1自动)和mt-autopeverage-top:自动

<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 h-100">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3 flex-fill">
            <h3>Title</h3>
            <p>Lorem ipsum dolor </p>
            <div class="align-self-center mb-3 mt-auto">
              <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 h-100">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3 flex-fill">
            <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 mt-auto">
              <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 h-100">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3 flex-fill">
            <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 mt-auto">
              <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 h-100">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3 flex-fill">
            <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 mt-auto">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
  </div>
</div>

匿名用户

只需将mt auto类添加到按钮中,这将解决您的问题,因为您的列具有相同的高度

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

匿名用户

我也有同样的问题,我用一个小脚本解决了它

你必须把它用在有信息的容器上

获取所选容器类2的所有高度div。获取最高3的高度。适用于具有相同类的所有容器,所有容器具有相同的高度。

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

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

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

希望这对你有用