时间戳

首页 > 解决方案 > Bootstrap 设置列高和间距

html - Bootstrap 设置列高和间距

问题描述

我想动态填充块。实际上，会有一个 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>

标签： htmlcssbootstrap-4

解决方案

你几乎很好，因为列的高度已经相等，但里面的内容并没有填满所有的空间。您可以像下面这样调整代码

注意类h-100( height:100%) flex-fill( flex:1 1 auto) 和mt-auto( margin-top:auto)的使用

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

推荐阅读