不使用行/列的副作用？

Question

我正在尝试开发一个网站的定价部分，其中包含3个不同的价格。在最高层应该有一个标题和简短说明，像“定价”，“定价方案：

<section id="pricing"> 
    <div class="container"> 
    <h2>Pricing</h2> 
    <p>The pricing plans</p> 
     <div class="row"> 
      <div class="col-md-4"></div> 
      <div class="col-md-4"></div> 
      <div class="col-md-4"></div> 
     </div> 
    </div> 
</section> 

现在，我见过的人把那应该是1行的东西/ 1列，直接在容器内，如上面如果我遵循了自举“公约”的话，我会怎么做：

<section id="pricing"> 
     <div class="container"> 
      <div class="row"> 
      <div class="col-xs-12"> 
       <h2>Pricing</h2> 
       <p>Here are our pricing plans</p> 
      </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-4"></div> 
       <div class="col-md-4"></div> 
       <div class="col-md-4"></div> 
      </div> 
     </div> 
</section> 

但是，并没有给单col-xs-12 reduntant行。如果你看到了什么？ source of the Bootstrap home page，你会发现<p>标签直接在container之内。但是，在这里，<h2>和<p> t ags不是容器内唯一的东西，它们之后有一排。

所以我的问题是，会有任何使用第一个例子与“遵循规则”和使用第二个例子的无意的副作用？

Answer 1

Bootstrap Grid框架依赖于填充和边距来正确放置。当您忽略.row或.col-*-*时，您会创建对齐问题。请看下面的代码：

.default { 
 
    background: blue; 
 
    color: white; 
 
} 
 
    
 
.no-column { 
 
    background: gray; 
 
} 
 
    
 
.no-row { 
 
    background: yellow; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 default"> 
 
     <p>A paragraph within a col-12 element</p> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <p class="no-column">A paragraph with no column wrapper.</p> 
 
    </div> 
 
    
 
    <p class="no-row">A paragraph with no column or row wrapper.</p> 
 
</div>

在我们后面引导的框架网格元素的第一个例子;文本被包装在包装在作为.container-fluid元素的一部分的行内的列内。

所有事情都按预期对齐。

在第二个示例中，我们省略了该列。立即我们失去了.col-*-*创建的填充，并且您的段落压向容器的最左边缘。

在第三个示例中，我们不仅省略了列，还省略了行类。正如你所看到的，间距差异变得更加极端。