Question

我想在一行和包含col之间创建一个父div：

<div class="container">
    <div class="row">
      <div id="rowcontent">
        <div class="col-md-6">afafafaf</div>
        <div class="col-md-6">afaf</div>
      </div>
    </div>
</div>

这样做的原因是我想在行中添加背景，如果我将背景添加到

  <div class="row">

背景放在边距上。但是，当我像示例代码那样执行它时背景是不可见的，因为rowcontent的高度是0.我怎么能改变它，rowcontent的高度将与col的高度相同。

Bootply

Answer 1

使用课程clearfix（http://getbootstrap.com/css/#helper-classes-clearfix）：

<div id="rowcontent" class="clearfix">

这是对块格式化上下文问题的修复：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

Answer 2

您可以使用display: table和table-cell让您的父母与其子女的尺寸相匹配。

#rowcontent
  {
     display: table;
     background: red;
   }

#rowcontent > div 
   {
     display: table-cell; 
     width:50%;
   }

BootPly demo

Bootstrap为col的父母做了一个

2 个答案: