Bootstrap 网格：流体到“一侧”

Question

我正在使用 Bootstrap 的网格系统进行布局。我目前有这样的事情：

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

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

我尝试使用 :after 伪选择器来引入一个出现在第二列旁边的块（这没关系，因为“全宽列”纯粹是出于美观的原因），但我无法得到它占据所有空间。

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

编辑：使事情更直观：

红色块是我目前拥有的（一列宽度为 4），绿色块是我想要的。

Answer 1

如果您使用 bootstrap 的 SASS，则可以使用替代解决方案：

// Custom mixin to generate container-fluid-left and container-fluid-right (fluid on the left/right and normal max width on the other)
// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-fluid-side-max-widths($side, $max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  margin-#{$side}: 0;
  padding-#{$side}: 0; 

  .row{
    margin-#{$side}: 0;
  }

  .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto{
    padding-#{$side}: 0;
  }

  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      max-width: calc( 100% - (100% - #{$container-max-width}) / 2 );
    }
  }
}


.container-fluid-left {
  @include make-container();
  @include make-container-fluid-side-max-widths('left');
}

.container-fluid-right {
  @include make-container();
  @include make-container-fluid-side-max-widths('right');
}

生成两个类 -container-fluid-left和container-fluid-right- ，它们在左/右侧是流动的，并且仅占用与另一侧的普通容器相同的空间。

Answer 2

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

此外， 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;
  }
}

引导 容器 容器流体 css

Answer 3

演示： http: //jsbin.com/titik/1/

超文本标记语言

<div class="container">
    <div class="col-xs-8">Content</div>
  <div class="col-xs-4"><div class="well">Words go in here words go in here Words go in here words go in here Words go in here words go in here Words go in here words go in here Words go in here words go in here </div></div>
</div>  

CSS

body {overflow-x:hidden}

.well {
    z-index: 3;
    border: 0px;
    background: red;
    position: relative;
}
.well:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left:80%;
    right:-3000px;
    background: red;
    z-index: -1;
}