Question

我需要一些帮助才能在第一列和其他四列组之间匹配相同的大小。然而，我尝试使用解决方案MatchHeight和row-eq-height。我还试着用桌子。主要问题是它制动响应工具。

我使用bootstrap 3.3.6

以下是我正在使用的示例：

<div class="container">
  <div class="row">
    <div class="col-xs-6 bg-success">
      <div class="small-box">
        <div class="row">
          <div class="col-lg-12 col-xs-12">
            <h3>Colonne 1</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices massa ligula, a faucibus nisi scelerisque sit amet. Sed cursus, urna eu suscipit egestas, dui dui luctus purus, malesuada pellentesque dolor dolor ac augue. Duis ac rutrum massa,
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 bg-warning">
      <div class="small-box">
        <div class="row">
          <div class="col-lg-6 col-xs-6">
            <h3>Colonne 2</h3>
            <p>
              Donec in venenatis enim. Fusce mollis dui a est pharetra mollis. Pellentesque rhoncus, sem nec tempus tincidunt, ligula velit condimentum sapien, non ullamcorper ipsum mi vitae ante. Donec justo neque, euismod ut dapibus ac, varius sit amet ante. Nullam
            </p>
          </div>
          <div class="col-lg-6 col-xs-6">
            <h3>Colonne 3</h3>
            <p>
              Donec in venenatis enim. Fusce mollis dui a est pharetra mollis. Pellentesque rhoncus, sem nec tempus tincidunt, ligula velit condimentum sapien, non ullamcorper ipsum mi vitae ante. Donec justo neque, euismod ut dapibus ac, varius sit amet ante. Nullam
            </p>
          </div>
          <div class="col-lg-6 col-xs-6">
            <h3>Colonne 4</h3>
            <p>
              Donec in venenatis enim. Fusce mollis dui a est pharetra mollis. Pellentesque rhoncus, sem nec tempus tincidunt, ligula velit condimentum sapien, non ullamcorper ipsum mi vitae ante. Donec justo neque, euismod ut dapibus ac, varius sit amet ante. Nullam
            </p>
          </div>
          <div class="col-lg-6 col-xs-6">
            <h3>Colonne 5</h3>
            <p>
              Donec in venenatis enim. Fusce mollis dui a est pharetra mollis. Pellentesque rhoncus, sem nec tempus tincidunt, ligula velit condimentum sapien, non ullamcorper ipsum mi vitae ante. Donec justo neque, euismod ut dapibus ac, varius sit amet ante. Nullam
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

其中一个限制是在右边有两行。我不能只做一个独特的行。

真诚地感谢谁愿意帮助，以及那些能够帮助的人。

Answer 1

将所有<div class="col-lg-6 col-xs-6">替换为<div class="col-lg-3 col-xs-3">

Answer 2

是的，这不是一件容易的事。

您可以使用＆＃34; Flex-Box＆＃34; （检查：https://codepen.io/imohkay/pen/gpard）如果＆＃34;可访问性＆＃34;您的项目可以允许它（不适用于IE9等：https://caniuse.com/#search=flexbox）。但我想它已经是＆＃34; row-eq-height＆＃34;正在做...

然后，您可以使用jQuery轻松完成。

尝试类似：

var autoHeightResize = function (selector) {
    // Not on responsive
    if($(window).width() < 1024) return false;

    var maxheight = 0;
    var items = $(selector);
    // Whats is the max height ?
    for (var i = 0; i < items.length; i++) {
        maxheight = Math.max(maxheight, $(items[i]).height());
    }
    // Resize block with max-height
    items.height(maxheight);
}

$(document).ready(function () {
    // Init '#mypage .columns' auto-height resize
   var selectorAutoHeightBlocs = '#mypage .columns';
   autoHeightResize(selectorAutoHeightBlocs);
   // update columns height on resize page
   $(window).resize(function() { 
        autoHeightResize(selectorAutoHeightBlocs);
   });
});

在您的情况下，您应该为div ＆＃34; col-xs-6 bg-success＆＃34; 和＆＃34; col-xs提供相同的班级名称-6 bg-warning＆＃34; （例如：class="my-same-height-column"）。

然后，在＆＃39; selectorAutoHeightBlocs＆＃39;中使用它。在上面的代码中。

Answer 3

我不建议您保持与小屏幕和超小屏幕相同的关系。但它是：

使用表格：

<style type="text/css">
  .first-col {
    width: 50%;
  }
  table th{
    width: 12.5%; /* (50/4) */
  }
</style>
<div class="responsive-table">
  <table>
    <thead>
      <tr>
        <th class="first-col"></td>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
  </table>
</div>

无表：

<div class="row">
  <!-- First Column -->
  <div class="col-xs-12 col-sm-6">
    <!-- Content -->
  </div>

  <!-- Small Ones -->
  <div class="col-xs-12 col-sm-6">
    <div class="row">
      <div class="col-xs-12 col-sm-3"></div>
      <div class="col-xs-12 col-sm-3"></div>
      <div class="col-xs-12 col-sm-3"></div>
      <div class="col-xs-12 col-sm-3"></div>
    </div>
  </div>
</div>

注意：表格响应式会创建一个框架，该框架可以保持大小关系，并在小屏幕中保持您的内容可读。

PHP / HTML - 包含列的列大小相同

3 个答案: