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

Posted 2023-03-06

【中文标题】Bootstrap 3中带有容器流体和容器的网格

【英文标题】：Grid with container-fluid and container in Bootstrap 3

【发布时间】：2016-08-30 10:20:35

【问题描述】：

我已经使用 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>

【问题讨论】：

我也有同样的问题 - 你找到解决方案了吗？

【参考方案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

如果我错过了你想要做的事情的标记，请告诉我，我可以尝试修改它并帮助你。

【讨论】：

感谢您的快速响应，但我在您的示例中缺少容器“1170 像素宽度”结构。我的整个网站都有class="container" 结构。在您的示例中，我无法在 1170 像素基本结构内的这些 div 上制作内容。

【参考方案2】：

应该是这个架构

<section>
  <div class="container-fluid">

        <div class="col-sm-12 col-md-6 no-padding"></div>
        <div class="col-sm-12 col-md-6 no-padding photo"></div>

        <div class="container">
            <div class= "row">
                <div class="col-sm-12 col-md-6 no-padding">Content</div>
                <div class="col-sm-12 col-md-6 no-padding photo"></div>
            </div>
        </div>

  </div>
</section>

【讨论】：

我相信“container”和“container-fluid”都不应该是可嵌套的，在文档中找到它：“注意，由于填充和更多，两个容器都不能嵌套”（getbootstrap.com/docs/3.3/css/#overview-container） .

@AleksandarBelic .. 已经尝试并且我多次使用嵌套的 'container-fluid' 和 'container without ' 没有特别的问题.. 如有必要，只需调整序列的填充 .container-flud> .container

【参考方案3】：

在 Bootstrap 4 上

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

sass

@mixin fluidwidth($widths: $container-max-widths, $breakpoints: $grid-breakpoints) 
  @each $breakpoint, $container-max-width in $widths 
    @include media-breakpoint-up($breakpoint, $breakpoints) 
      width: calc(100% + ((100vw - #$container-max-width)/2) );
    
  

.elem.right@include fluidwidth;