Question

使用Bootstrap 3。我有两个col（col-md-8和col-md-4）相同的高度。（感谢这里有一个小片段:)）

这没关系，它有效。但是我需要他们有一个背景颜色。问题是 - 实际上这是正常的 - 两个col是并排的，因此我们之间没有白色的阴沟。

我可以尝试在每个col中使用“内部”div。但是后来我需要这些内部div与父级具有相同的高度。

她的结果： You can see the gutters filled with the background color

@media only screen and (min-width : 768px) {
  .is-table-row {
    display: table;
  }
  .is-table-row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
  }
}
.red {
  background: red;
}
.green {
  background: green;
}

  

<div class="container">
  <div class="row is-table-row">
   <div class="col-md-8 red"> text </div>
   <div class="col-md-4 green"> text text text text text text text text    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
  </div>
 </div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

你能帮我吗？

Answer 1

这就是我主要解决这个问题的方法：

而css是：

<div class="row is-table-row">
   <div class="col-md-8 red"> 
       <div class="inner">
           text
        </div> 
    </div>
   <div class="col-md-4 green"> 
       <div class="inner">
           text
        </div> 
    </div>
</div>

我不知道这是否是最好的解决方案，但它能完成这项工作

Answer 2

要在Bootstrap的列上达到相同的高度，您可以尝试：

.same-height {
  position: relative;
}

.same-height .red,
.same-height .green {
  position: static;
}

.same-height .red:before,
.same-height .green:before{
  position: absolute;
  content: '';
  z-index: -1;
  bottom: 0;
  top: 0;
}

.same-height .red:before {
  width: calc(66.66666667% - 30px);
  background: red;
}

.same-height .green:before {
  width: calc(33.33333333% - 30px);
  background: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container same-height">
  <div class="row">
     <div class="col-xs-8 red"> text text text text text text text text text text text </div>
     <div class="col-xs-4 green">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
  </div>
</div>

使用Bootstrap具有相同高度和背景颜色的列

2 个答案: