Html col-破坏我们的包装

我试图掌握响应式布局是如何工作的，所以我从bootstrap中获取了响应式col布局

我试图做的是创建一个红色框，填充1列的空间，并将其放置在容器\u流体>容器>行中。当我将“col-lg-12”添加到类中时，它将从container\u fluid>container>行中分离出来

html

包含所有col lg col md等的部分也都在css中。

只需使用以下内容：

<div class="container">
<div class="row">
    <div class="col-lg-1 ">
        <div class="red_box"></div>
    </div>
</div>

拆下容器油液室。

---

我希望它能起作用

对于流体容器，使用引导网格系统的预期方式如下所示：

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-1">
      <div class="red_box"></div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="red_box"></div>
    </div>
  </div>
</div>

对于固定中心的容器，如下所示：

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-1">
      <div class="red_box"></div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="red_box"></div>
    </div>
  </div>
</div>

在大多数情况下，您不需要重置容器和行边距，它可以很好地使用它

---

请查看以下内容。

div.container-fluidwhoops上没有结束标记，很抱歉，当我复制粘贴时，我错过了最后一个结束标记。实际上我已经在那里了。谢谢