html - Bootstrap 3 中带有容器流体和容器的网格

Question

我使用 html/css 已经有一段时间了。我从来没有在 Bootstrap 3 中遇到过这种网格问题。我试图找到一种方法将 50% 宽度(在 <div class="container-fluid"> 内)与 50% 宽度 div(在 <div class="container"> 内)结合起来。就像下图中的网格:

Example of the template

• 黄色叠加层:<div class="container"></div>

问题是它们不能一起工作，因为宽度。

那么我该如何模拟呢？

<section>
   <div class="container-fluid">
      <div class="col-sm-12 col-md-6 no-padding"></div>
         <div class="container">
            <p>content</p>
         </div>
      </div>
      <div class="col-sm-12 col-md-6 no-padding photo"></div>
   </div>
</section>

Answer 1

如果我理解您要实现的目标，那么会存在一些问题。首先，您仍然需要一个行 div 来包裹列，而列又嵌套在容器中。此外，默认情况下，容器会有一些填充，因此也需要使用一些基本 CSS 将其删除。

这是 HTML 结构

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6" id="left">
      Left Side
    </div>
    <div class="col-lg-6" id="right">
      Right Side
    </div>
  </div>
</div>

另外，这里有一个你可以玩的实例:http://www.bootply.com/MKe7aJwKuc

让我知道如果我错过了你想要做的事情，我可以尝试重新设计并帮助你。