来自 bootstrap 的分隔符和列表组流经 div

Question

我的笔：http://codepen.io/helloworld/pen/yyoJGR

为什么白色分隔符和列表分组流过 div 或父行？

<div class="container columnStyle">
  <div class="row">
    <div class="row-same-height">
        <div class="col-xs-3 col-xs-height">
          <img class="img-responsive" src="http://s7.postimg.org/agarkavmj/whoiswho.png"></img>
      </div>
      <div class="col-xs-9 col-xs-height" >
        <div class="container">
          <div class="row">
            <div class="page-header">
                <h1>Who is who
                  <p>
                    <small>Organization & Processes</small>
                  </p>
                </h1>                
              </div>
          </div>
        </div>
        <div class="container">
          <div class="row">
             <ul class="list-group">
               <li class="list-group-item">Org Charts  </li>
               <li class="list-group-item">GAM / KAM Charts</li>
               <li class="list-group-item">Process flow</li>             
            </ul>
         </div>
        </div>
      </div>       
    </div>
  </div>
</div>


.columnStyle{
  background: #006AB3;
}

Answer 1

因为您多次使用 class .container。这个class固定width为1170px；

.container {
width: 1170px;
}

你应该只有 1 个 .container 用于包装，然后在里面，移除另一个 .container 并只使用 .row

查看实际效果：http://codepen.io/anon/pen/ogeLRb

来自 bootstrap 的分隔符和列表组流经 div

separater and list-group from bootstrap are flowing through divs

html

css

twitter-bootstrap-3