将三列高度相同

Question

使用引导程序，我创建了三列。在每一列中，我有几行。

我的问题是列的高度不同，左列比其他列大，它们应该都是相同的高度。

在卡片中我没有定义任何高度，也就是说，如果任何一列增加了高度，其余的将自动跟随这种增长，以便具有相同的高度。

有没有办法在不使用像素 (px) 测量值的情况下将所有列放置在同一高度？

谢谢

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<div class="col-3">
  <div class="row">
    <div class="col" style="padding-right:0">
      <div class="card cardm">
        <div class="card-body" style="overflow-y: auto;">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col" style="padding-right:0">
      <div class="card cardm">
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="row">
    <div class="col">
      <div class="card cardm">
        <div class="card-body">

        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="card cardm">
        <div class="card-body">

        </div>
      </div>
    </div>
  </div>

Answer 1

如果您使用的是Bootstrap4，那么您可以轻松地使用achieve by BS4 predefined classes，例如h-100，而且您的html 结构也不正确，因此请按照引导说明进行操作。

Predefined classes for width & height follow: https://getbootstrap.com/docs/4.3/utilities/sizing/#relative-to-the-parent

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container my-2">
  <div class="row">
    <div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Ut enim ad minim veniam, quis nostrud exercitation ullamco.
        </div>
      </div>
    </div>
  	<div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Laboris nisi ut aliquip ex ea
        </div>
      </div>
    </div>
  	<div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

用 js 完成，只是从重复的链接帖子中复制的。不过在小屏幕上显示很奇怪。

// Get cards
var cards = $('.card');
var maxHeight = 0;

// Loop all cards and check height, if bigger than max then save it
for (var i = 0; i < cards.length; i++) {
  if (maxHeight < $(cards[i]).outerHeight()) {
    maxHeight = $(cards[i]).outerHeight();
  }
}
// Set ALL card bodies to this height
for (var i = 0; i < cards.length; i++) {
  $(cards[i]).height(maxHeight);
}

.mycontainer {
    width: 96%;
    margin-top: 148px;
    margin-right: auto;
    margin-left: auto;
}

.card{
    width:100%;
    margin-top:15px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 20px #BCBCCB47;
    border-radius: 8px;
    border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 100%;height: 100%; overflow-y: auto; overflow-x: hidden;">
    <div class="row mycontainer">
      <div class="col">
        <div class="row">
          <div class="card">
            <div class="card-body" style="padding: 8px;">
            
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="row">
              <div class="card">
                <div class="card-body">
                
                </div>
              </div>
            </div>
            <div class="row">
              <div class="card">
                <div class="card-body">
               
            
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row h-100">
              <div class="card" style="margin-left:15px">
                <div class="card-body">
               
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row h-100">
              <div class="card" style="margin-left:15px">
                <div class="card-body">
           
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="row">
          <div class="col">
            <div class="row h-100">
              <div class="card">
                <div class="card-body">
         
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row h-100">
              <div class="card" style="margin-left:15px">
                <div class="card-body">
           
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row">
              <div class="col" style="padding-right:0">
                <div class="card cardm">
                  <div class="card-body">
                 
                  </div>
                </div>
              </div>
              <div class="col" style="padding-right:0">
                <div class="card cardm">
                  <div class="card-body">
                
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col" style="padding-right:0">
                <div class="card cardm">
                  <div class="card-body">
                 
                  </div>
                </div>
              </div>
              <div class="col" style="padding-right:0">
                <div class="card cardm">
                  <div class="card-body">
                 
                  </div>
                </div>
              </div>
            </div>
          </div>


        </div>
        <div class="row">
          <div class="col">
            <div class="row h-100">
              <div class="card">
                <div class="card-body" style="padding: 16px;">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-3">
        <div class="row">
          <div class="col" style="padding-right:0">
            <div class="card cardm">
              <div class="card-body" style="overflow-y: auto;">
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col" style="padding-right:0">
            <div class="card cardm">
              <div class="card-body">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="row">
          <div class="col">
            <div class="card cardm">
              <div class="card-body">
             
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="card cardm">
              <div class="card-body">
           
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>