Question

我试图了解响应式布局的工作原理，因此我从引导程序中获取了响应式col布局。

我要做的是创建一个红色框，填充1列的空间，并将其放在container_fluid＆gt; container＆gt;行中。我添加＆＃34; col-lg-12＆＃34;在课堂上它突破了container_fluid＆gt;容器＆gt;行。

HTML

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

CSS

.container_fluid{
margin-left: 0px;
margin-right: 0px;
background-color: #000000;
}
.container{
margin: 0px auto;
padding: 10px 0px 10px 0px;
background-color: #367AD7;
}
.row{
margin-left: 0px;
margin-right: 0px;
}

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

Answer 1

请使用：

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

删除容器 - 流体div。我希望它能完成这项工作。

Answer 2

对于流体容器，使用Bootstrap网格系统的期望方式如下：

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

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

查看以下example。

打破我们的包装

2 个答案: