Boostrap流体容器嵌套问题

Question

我有一个需要全宽的部分。好的，流体容器。现在，在那里，我需要两个colummns，-8和-4，每个都有不同的背景颜色。好的，没问题。

现在，设计要求这些列中的内容（.left和.right）具有副本，就像它在.container中一样

这是我的html snipper

<div class="container-fluid homeBannerCTAs">
  <div class="row">
    <div class="col-sm-12 col-md-8 left">
      <div class="">
        <h2>Left CTA</h2>
      </div>
    </div>
    <div class="col-sm-12 col-md-4 right">
      <div class="">
        <h2>right CTA</h2>
      </div>
    </div>
  </div>
</div>

和我的sass片段，它给出了一个高度并设置了bg颜色。

.homeBannerCTAs {
  @include breakpoint(lg) {
    height : 234px;
  }
  .left {
    height : inherit;

    background : #004557;
  }
  .right {
    height : inherit;

    background : #dfc986;
  }
}

设计部分。

这是我的完整原型

http://boilerplate.fls-interactive.com/kffTemplate.php

我还没有移动设计（是的，我知道），但我认为这些会堆叠。

我有点在这里敲我的头。

干杯。

Answer 1

您是否必须使用Bootstrap，或者您可以在这里使用Flexbox吗？使用Flexbox可以轻松实现这样的功能。如果你可以使用Flexbox，请告诉我，我会发布一个Codepen。

好的，比如

.container {
  display:flex;
}

.left-col {
  flex: 2 0 auto;
  padding:20px;
  background:#CCC;
}

.right-col {
  flex:1 1 auto;
  padding:20px;
  background:#999;
}

这是一个非常基本的CodePen：

http://codepen.io/toddsdarling/pen/akgqJy“

您可以调整每个容器的弯曲度以占用更多或更少的空间，还可以设置高度（以及最大高度）。

我有时会使用我不希望缩小超过一定宽度的列。例如，您可以执行类似“flex：0 400px”的操作。