具有 bootstrap-4 不同盒子高度的响应式盒子网格

Question

我尝试使用 box 类和引导程序制作一个包含 6 个文本框的响应式网格。

我的问题是，盒子里有不同数量的文本，它们有不同的宽度/高度，但我希望它们具有与文本最多的盒子相同的最大高度/最大宽度。

是否有机会在不对所有框的宽度/高度进行硬编码的情况下完成这项工作？

这是一个代码sn-p：

/***** Box *****/

.flex-box {
  position: relative;
  text-align: center;
  margin-top: 10px;
  margin-right: auto;
  margin-bottom: ;
  margin-left: auto;
  padding: 40px;
  transition: all 0.3s ease;
  background-color: rgb(170, 230, 255);
}

.flex-box:hover {
  margin-top: 5px;
  margin-bottom: 5px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}

<!-- Textbox-Sections -->
<section id="about_me" class="section-padding title">
  <div class="container-fluid">
    <div class="container pt-4">
      <h1 class="title">About me</h1>
      <div class="row">
        <div class="col col-12 col-sm-6 col-lg-4">
          <div class="flex-box">
            <h1 class="boxtitle">My way</h1>
            <p class="lead">
              <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti fuga iusto aspernatur magni rem quas deserunt repellendus hic fugit amet tempora labore perferendis, voluptate possimus itaque cum molestias dolores. Omnis?</div>
            </p>
          </div>
        </div>
        <div class="col col-12 col-sm-6 col-lg-4">
          <div class="flex-box">
            <h1 class="boxtitle">My way</h1>
            <p class="lead">
              <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse voluptatum soluta cum provident explicabo fugiat dolores odit blanditiis dolorem magni. Quaerat temporibus doloremque beatae voluptatum dignissimos? Eligendi voluptatum similique
                incidunt!
              </div>
            </p>
          </div>
        </div>
        <div class="col col-12 col-sm-6 col-lg-4">
          <div class="flex-box">
            <h1 class="boxtitle">My way</h1>
            <p class="lead">
              <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate ipsam neque recusandae similique. Inventore repellendus aliquid delectus explicabo dolore sapiente voluptas nihil dolorem tempore voluptates, nemo ipsum cumque animi quidem.</div>
            </p>
          </div>
        </div>

        <div class="col col-12 col-sm-6 col-lg-4">
          <div class="flex-box">
            <h1 class="boxtitle">My way</h1>
            <p class="lead">
              <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod illo incidunt nihil praesentium minus itaque hic, soluta dicta cupiditate quos dolorum esse, harum placeat, qui veritatis animi sunt? Ab, nobis.</div>
            </p>
          </div>
        </div>
        <div class="col col-12 col-sm-6 col-lg-4">
          <div class="flex-box">
            <h1 class="boxtitle">My way</h1>
            <p class="lead">
              <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, fuga vel. Maxime hic tempore quo animi ex vero doloribus dolores quos, sapiente delectus dolor et laborum amet quam aspernatur earum.</div>
            </p>
          </div>
        </div>
        <div class="col col-12 col-sm-6 col-lg-4">
          <div class="flex-box">
            <h1 class="boxtitle">My way</h1>
            <p class="lead">
              <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta, repellendus distinctio ratione autem consequatur rerum libero nesciunt ullam eaque molestias odit architecto nisi incidunt quasi omnis ut. Natus, exercitationem alias.</div>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Here's a link to the CodePen site

谢谢

Answer 1

只需将.flex-box height:100% 填满col-*...

https://codepen.io/anon/pen/GQORQV?editors=1100

.flex-box {
  position: relative;
  text-align: center;
  margin-top: 10px;
  margin-right: auto;
  margin-bottom:;
  margin-left: auto;
  padding: 40px;
  height: 100%;
  transition: all 0.3s ease;
  background-color: rgb(170, 230, 255);
}

Answer 2

我认为仅使用 css 是不可能的，但是是的，如果您使这些框垂直，我的意思是彼此相互连接，那么绝对是可能的，但不是水平的。如果部分彼此对齐，则网格中可能具有相同的高度，例如 --

Answer 3

正如@Abhijeet 所说，只有水平对齐的框才能使用 css。否则你可以使用这个 jQuery sn-p:

var max_height = 0;
var max_width = 0;
$('.equal-size').each(function(e) {
  h = $(this).height();
  if(typeof(h) != "undefined") {
   if(h > max_height) {
     max_height = h;
   }
  }
  w = $(this).width();
  if(typeof(w) != "undefined") {
   if(w > max_width) {
     max_width = w;
   }
  }
});
if(max_height > 0) {
  $('.equal-size').height(max_height);
}
if(max_width > 0) {
  $('.equal-size').width(max_width);
}

你需要给元素类equal-size。

它正在寻找最大高度/宽度并将其应用于每个元素。

---

这仅在您只有一组应该具有相同高度/宽度的元素时才有效。如果你有更多，你需要给出组号并适当地更改类（equal-size-1，equal-size-2，...）并使用这个 sn-p：

var numberOfGroups = 2;
for(var i=1; i<numberOfGroups+1; i++) {
    var max_height = 0;
    var max_width = 0;
    $('.equal-size-'+String(i)).each(function(e) {
      h = $(this).height();
      if(typeof(h) != "undefined") {
       if(h > max_height) {
         max_height = h;
       }
      }
      w = $(this).width();
      if(typeof(w) != "undefined") {
       if(w > max_width) {
         max_width = w;
       }
      }
    });
    if(max_height > 0) {
      $('.equal-size-'+String(i)).height(max_height);
    }
    if(max_width > 0) {
      $('.equal-size-'+String(i)).width(max_width);
    }
}