引导列对齐答案

【问题标题】：Bootstrap Column Alignment引导列对齐
【发布时间】：2015-12-05 05:37:29
【问题描述】：

在引导程序中对齐行内的列时遇到问题。我有以下结构：

<section class="container-fluid centerP">

    <div class="row">
        <div class="col-lg-6 col-lg-offset-3 col-xs-10 col-xs-offset-1">
            <h1></h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
            <h3></h3>
            <p></p>
        </div>
        <div class="col-lg-4 col-lg-offset-2  col-xs-8 col-xs-offset-2">
            <h3></h3>
            <p></p>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
            <h3></h3>
            <p></p>

        </div>
        <div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
            <h3></h3>
            <p></p>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-lg-offset-4  col-xs-8 col-xs-offset-2">
            <h3></h3>
            <p></p>
        </div>
    </div>


</section>

它应该看起来像一个 1-2-2-1（垂直对齐的内容框）。目前它们居中但由于 2 的重叠而相距太远。我找到了一个提到使用“行居中”和“col-centered”类的解决方案，它一直有效，直到我将类修改为“col-xs”和“col-lg”。所以过去两天我试图做的是让他们更接近，但没有成功。

我几周前开始编码，所以如果问题很愚蠢，请多多包涵

【问题讨论】：

标签： twitter-bootstrap-3 responsive-design alignment center multiple-columns

【解决方案1】：

每行应拆分为 12 列。

例如：

<div class="row">
<div class=col-md-6>
something
</div>
<div class=col-md-6>
something
</div>
</div>

【讨论】：

【解决方案2】：

一些建议：

我认为您的意思是使用<div class="container-fluid centerP"> 而不是<section class="container-fluid centerP>。查看What is the difference between <section> and <div>? 了解更多关于为什么您应该在此处使用div 而不是section。

一个简单的 1-2-2-1 垂直对齐的中心列块可以这样写：

<div class="container">
<div class="row">
    <div class="col-md-12">
        <h1 id="headerBox">Dolloping doubloons!</h1>
    </div>
</div>
<div class="row">
    <div class="col-md-5">
        <p class="contentText">Dolloping doubloons!</p>
    </div>
    <div class="col-md-2"></div>
    <div class="col-md-5">
        <p class="contentText">Dolloping doubloons!</p>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <h3 id="footerText">Dolloping doubloons!</h3>
    </div>
</div>

然后，您可以使用 ids 和 classes 在 CSS 中设置文本的 padding 和 margin 属性，这反过来可以让您更精确地控制文本的显示位置。例如，如果您想将文本在其各自的框中居中，您可以使用margin: 0 auto;。

【讨论】：