Question

我确信我错过了一些非常微不足道的事情，但我已经精神疲惫，试图弄明白。

我有一个包含3个基本部分的页面：

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

我知道您应该在.row或.container内保留.container-fluid个元素。当您有多个部分并且想要使用网格系统时，正确的用法是什么？上面描述的每个div应该使用container类吗？

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

<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类时，它基本上归结为很多填充问题。我想使用网格系统，有时在其中一个网格中使用另一个网格，网格中的网格。

这是我正在经历的行为的图片： enter image description here

我知道我搞砸了一些东西，但是我试图调试的越多，我似乎越是搞砸网格。

修改

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

enter image description here

EDIT2：

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

Answer 1

就我看到你使用嵌套.container类的主要问题而言。你应该只使用一个用于外部块。

e.g。

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

UPD：

同样也适用于行类。无需使用

<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;
}

什么是正确使用＆＃39;行＆＃39;使用多个div部分堆叠在一起时的课程？

2 个答案: