Html 引导中的分隔符和列表组在div中流动

我的笔：

为什么白色分隔符和列表分组会流经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;
}

谁是谁

组织与过程


组织结构图
GAM/KAM图表
流程流程

.专栏风格{
背景#006AB3；
}

因为您多次使用类

.container

。 该类具有固定的

宽度
为
1170px

.container {
width: 1170px;
}

包装器应该只有一个
.container
，然后在其中移除另一个
.container
，只使用
.row

在实际操作中查看：
当我将多个容器制成流体时，是否可以使用多个容器？它们应该留在列中，而不是？为什么要使用多个
.container
？对于引导列布局，使用.row就足够了
.container
仅用于以1170px的宽度（取决于屏幕大小）包装内容。好的，我通常希望列/行之间有更多的间隙/填充。您如何使用引导处理此问题，而无需手动操作？有课吗？