无覆盖的自举偏移

Question

我是 bootstrap 新手，之前没有使用过他们的网格系统。我正在尝试使用完整的 12 网格并有一个 div 1-5 和一个 8-12 所以每个 div col- lg-5.

我尽量不要过多地覆盖 CSS 以保持它的清洁，我似乎对 float:left 有问题。据我从文档中可以看出，我正在正确使用系统，但它不工作，第二个 div 下降到下一行。

我的代码

 <div class="row">
            <div class="col-xs-6 col-lg-5 well well-lg">
                <h2>Heading</h2>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
                    mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
                    magna mollis euismod. Donec sed odio dui. </p>
            </div>

            <div class="col-xs-6 col-lg-5 col-lg-offset-7 well well-lg">
                <h2>Heading</h2>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
                    mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
                    magna mollis euismod. Donec sed odio dui. </p>
            </div>
        </div>

Answer 1

您的错误是您在一行中有两个不同的.col-lg-5 div，并且您将.col-lg-offset-7 类添加到第二个（5 + 5 + 7 = 17）。但是，偏移类别应为.col-lg-offset-2，以不超过12 列 网格系统。

<div class="row">
    <div class="col-xs-6 col-lg-5 well well-lg">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
            mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
            magna mollis euismod. Donec sed odio dui. </p>
    </div>

    <div class="col-xs-6 col-lg-5 col-lg-offset-2 well well-lg">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
            mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
            magna mollis euismod. Donec sed odio dui. </p>
    </div>
</div>

以下是其他示例，供您了解网格系统的工作原理：

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>

<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>