没有覆盖的引导偏移

Question

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

我试图不覆盖CSS --为了保持它的干净，我似乎对float有一个问题:左。据我所知，从文档中我正确地使用了这个系统，但是它不起作用，第二个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>

​

​