不使用行/列的副作用?

我正在尝试开发一个网站的定价部分,其中包含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不是容器内唯一的东西,它们之后有一排。

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

回答:

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-*-*创建的填充,并且您的段落压向容器的最左边缘。

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

以上是 不使用行/列的副作用? 的全部内容, 来源链接: utcz.com/qa/265702.html

回到顶部