当使用多个 div 部分相互堆叠时，'row' class 的正确用法是什么？

Question

我确定我遗漏了一些非常微不足道的东西，但我已经精疲力竭地试图找出它。

我得到一个包含 3 个基本部分的页面，如下所示：

<body>
    <div id="topHead">
        ...
    </div>
    <div id="content">
        ...
    </div>
    <div id="footer">
        ...
    </div>
</body>

我了解到您应该在 .container 或 .container-fluid 中保留 .row 个元素。当你有多个部分并且你想使用网格系统时，正确的用法是什么？上面描述的每个 div 都应该使用 container class?

例如，我正在使用与此类似的东西：

<body class="container">
    <div id="topHead">
        <div id="logo">
            <img src="logo.png">
        </div>
        <div id="site-title">
            <h2 class="text-center">My Website</h2>
        </div>
    </div>
    <div id="content" class="container">
        <div class="row">
            <div id="left-menu" class="col-md-3">
                <div class="row">
                    ...
                </div>
            </div>
            <div id="main" class="col-md-12">
                <div class="row">
                    ...
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <p>My Website.</p>
    </div>
</body>

我永远不应该使用嵌套的 .row 部分吗？

对不起，如果我含糊不清。我很难描述正在发生的事情，但是当我使用 row class 时，基本上可以归结为很多填充问题。我想使用网格系统，有时在其中一个中使用另一个网格，一个网格中的一个网格。

这是我遇到的行为的图片：

我知道我搞砸了，但我越是尝试调试它，我就越是把网格搞砸了。

编辑：

在这个中我只使用了一个容器，<body> 标签中的那个。

编辑2：

这是上面图片的 fiddle。 https://jsfiddle.net/kbqqfn0k/2/

Answer 1

据我所知，您的主要问题是您使用了嵌套的 .container class。你应该只使用一个用于外部块。

例如

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="row">
                <!-- etc -->
            </div>
        </div>
    </div>
</div>

更新：

第 class 行也是如此。无需使用

<div class="row">
    <div class="row">

见https://jsfiddle.net/y804nyjn/1/

UPD2:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="row">
                <!-- etc -->
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-6">
                  <!-- etc -->
                </div>
            </div>
        </div>
    </div>

    <div>
      <!-- do not use .row class, unless you are using col-X-* inside-->
    </div>
</div>

Answer 2

在 bootstrap.min.css 中，您需要注释这三行或创建新的 css 并将这三行添加为 !important

.row {
/* margin-left: -15px; */
/* margin-right: -15px; */
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
min-height: 1px;
padding-left: 15px;
/* padding-right: 15px; */
position: relative;
}

当使用多个 div 部分相互堆叠时，'row' class 的正确用法是什么？

What is the correct use of the 'row' class when using several div sections stacked onto each other?

twitter-bootstrap

twitter-bootstrap-3