html - 没有覆盖的自举偏移

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>