Question

我一直在使用html / css一段时间了。我从来没有遇到Bootstrap 3的这种网格问题。我试图找到一种方法将50％宽度（在<div class="container-fluid">内）和50％宽度div（在{{1}内）结合起来}）。像下图中的网格一样：

Example of the template

黄色叠加：<div class="container">

问题在于它们不能同时协同工作。

那么我该如何模拟呢？

<div class="container"></div>

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

如果我错过了您正在尝试做的事情，请告诉我，我可以尝试重做并帮助您。

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

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

无礼

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

在Bootstrap 3中使用容器流体和容器的网格

3 个答案: