bootstrap offseting without overrides

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>