Question

我正在努力实现4个具有相同高度的列，根据Bootstrap 3.x方法的最佳方法https://stackoverflow.com/a/22892773

我认为我正在做的一切正确，但遗憾的是没有。

以下是代码：

HTML：

<div class="container">
    <div class="row equal">

      <div class="col-md-3 col-sm-12 col-xs-12">
         <div id="wpis-excerpt">
            <a href="#"><h1>Lorem Ipsum</h1></a>
            <p>Nulla eget felis velit. Praesent justo tortor, luctus in turpis id, auctor volutpat nunc. Sed malesuada et sapien id eleifend. Suspendisse scelerisque tempus quam, sagittis congue justo volutpat vel. Etiam fringilla auctor quam, a suscipit nisl interdum non. Pellentesque id sem a dolor pellentesque molestie.</p>
         </div>
      </div>

      <div class="col-md-3 col-sm-12 col-xs-12">
         <div id="wpis-excerpt">
            <a href="#"><h1>Lorem Ipsum Lorem Ipsum</h1></a>
            <p>Vestibulum sit amet velit varius, hendrerit purus a, aliquam ante. Nullam cursus ultrices lacus in hendrerit. Nam quis sem sed orci tempus interdum. Sed non erat turpis. Nam vitae orci at ligula auctor eleifend.</p>
         </div>
      </div>

      <div class="col-md-3 col-sm-12 col-xs-12">
         <div id="wpis-excerpt">
            <a href="#"><h1>Lorem Ipsum Lorem Ipsum Lorem Ipsum</h1></a>
            <p>Pellentesque finibus bibendum feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget dolor vel augue porttitor lobortis. Praesent et varius massa, consequat convallis lorem. </p>
         </div>
      </div>

      <div class="col-md-3 col-sm-12 col-xs-12">
         <div id="wpis-excerpt">
            <a href="#"><h1>Lorem Ipsum</h1></a> 
            <p>Aliquam enim turpis, porta quis pellentesque ac, porttitor sit amet lorem. Vestibulum elementum gravida finibus. Vestibulum euismod pellentesque justo et pellentesque. Quisque pellentesque odio id imperdiet iaculis. Phasellus vel ex ullamcorper, aliquam mi non, faucibus erat. Quisque dolor dui, posuere eu tortor sit amet, auctor eleifend velit. Integer blandit aliquet erat id dignissim.</p>  
         </div>
      </div>

   </div>
</div>

CSS：

#wpis-excerpt { text-align: justify; border-top: 5px solid #471950; border-bottom: 9px solid #471950; margin-bottom: 10px; }

#wpis-excerpt h1 { font-size: 34px; font-family: 'Oswald'; color: #000; font-weight: 700; text-align: left; padding: 10px; }

#wpis-excerpt p { font-size: 15px; color: #4F4E4F; padding: 10px; line-height: 22px; }


@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}


.equal > div[class*='col-'] {  
  display: flex;
  flex-direction: column;
}

这也是一个小提琴：https://www.bootply.com/XpaysnjJrO

Answer 1

您误解了bootstrap中的列。div col-md-3是列，而不是ID为wpis-excerpt的div。

  <div class="col-md-3 col-sm-12 col-xs-12">
     <div id="wpis-excerpt">
        <a href="#"><h1>Lorem Ipsum</h1></a> 
        <p>xxxxxxxxxxxx.</p>  
     </div>
  </div>

实际上，代码中的四列具有相同的高度，但有些具有大量的空白高度，这误导了四列具有不同的高度。您可以使用chrome或firefox来检查它。以下是来自的图片我的铬。

希望它可以帮助你。

使用flexbox，Bootstrap col高度相同

1 个答案: