Question

我在bootstrap中使用与嵌套彩色div相同的高度cols / box时遇到问题。看看它的外观：https://www.dropbox.com/s/ko6zmqwup4wgasb/bootstrap-equal-height-cols.jpg?dl=0

实际上将cols设置为相等的高度不再是flex box的问题。我遇到的困难是设置正确的外观。由于设置了边距和填充，bootstrap cols不具有彩色背景。因为我在行包装器中有2个div，所以似乎很难解决这个问题。缩减的HTML代码：

<div class="row row-eq-height">
  <div class="col-sm-6 col-md-4">
    <div class="portfolio-el bg-dark-gray">
      <div class="view"> 
        <img src="images/image_360x180_1.jpg" alt="dummy">
      </div>
    <div class="portfolio-text-content">
      here goes text which causes different heights of those boxes...
    </div>
  </div>
</div>
<div class="col-sm-6 col-md-4">
  <div class="portfolio-el bg-dark-gray">
    <div class="view"> 
      <img src="images/image_360x180_2.jpg" alt="dummy">
    </div>
    <div class="portfolio-text-content">
      here goes text which causes different heights of those boxes...
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
  <div class="portfolio-el bg-dark-gray">
    <div class="view"> 
      <img src="images/image_360x180_3.jpg" alt="dummy">
    </div>
    <div class="portfolio-text-content">
      here goes text which causes different heights of those boxes...
    </div>
  </div>
</div><!-- end row -->

CSS：

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.bg-dark-gray {
    background: #efefef;    
}

其余所有内容都由bootstrap类完成＆gt;网格等我看过给cols flex的示例：1，但是对于灰色背景的div，我需要100％的高度。任何想法或解决方法？干杯

具有嵌套彩色div

0 个答案: