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列的东西放在容器内，如上所述。如果我遵循Boostrap“惯例”，那么我会这样做：

<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还原剂是不是排成一排？如果您看到source of the Bootstrap home page，则会在<p>内直接看到container个标记。但是，在这里，<h2>和<p>标记不是容器内的唯一内容，后面跟着一行。

所以我的问题是，使用第一个例子与“遵守规则”并使用第二个例子会产生任何无意的副作用吗？

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>

在第一个例子中，我们有一个跟随Bootstrap框架的网格元素; text包含在一列中，该列包含在.container-fluid元素的一部分行中。

一切都符合预期。

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

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

不使用行/列的副作用？

1 个答案: