css - Bootstrap 网格 : fluid to "one side"

Question

我正在使用 Bootstrap 的网格系统进行布局。 我目前有这样的东西:

<div class="container">
    <div class="col-xs-8">...</div>
    <div class="col-xs-4">...</div>
</div>

我真正想要实现的是让第二列占据剩余的可用水平空间，即第二列的行为就像在流体容器中一样，但第一列的行为仍然像在固定容器中一样.

我尝试使用 :after 伪选择器来引入一个出现在第二列旁边的 block (这没问题，因为“全宽列”纯粹是为了美观)，但我做不到不要让它占用所有空间。

如果有人对如何以一种很好的方式实现这一目标有任何想法，我们将不胜感激。

编辑:使内容更直观:

红色 block 是我目前拥有的(宽度为 4 的列)，绿色 block 是我想要的。

Answer 1

我找到了一个优雅的解决方案。 包装容器类用于更改其下容器的行为，而不是全局更改它。

此外，margin-right: 0 用于从右侧设置容器流体，您可以使用 margin-left: 0 将其设置为向另一侧流体。

注意:如果容器没有到达屏幕边缘，只需从列中移除填充。

@media (min-width:768px) {
  .YourWrappingContainerClass .container {
    width: calc(((100% - 750px) / 2) + 750px) !important;
    margin-right: 0;
  }
}

@media (min-width:992px) {
  .YourWrappingContainerClass .container {
    width: calc(((100% - 970px) / 2) + 970px) !important;
    margin-right: 0;
  }
}

@media (min-width:1200px) {
  .YourWrappingContainerClass .container {
    width: calc(((100% - 1170px) / 2) + 1170px) !important;
    margin-right: 0;
  }
}

bootstrap container container-fluid css