bootstrap 无覆盖偏移

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 class 添加到第二个 (5 + 5 + 7 = 17)。但是，偏移量 class 应 .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>

bootstrap 无覆盖偏移

bootstrap offsetting without overrides

html

css

offset

twitter-bootstrap