引导网格：流体到“一侧”答案

【问题标题】：Bootstrap grid: fluid to "one side"引导网格：流体到“一侧”
【发布时间】：2014-09-17 07:23:30
【问题描述】：

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

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

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

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

如果有人对如何以一种好的方式实现这一点有任何想法，那将不胜感激。

编辑： 让事情更直观：

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

【问题讨论】：

我没有看到你的问题：jsfiddle.net/DTcHh/680
问题是在更大的屏幕上，右栏的右侧没有延伸到屏幕的右边缘。

标签： css html twitter-bootstrap responsive-design

【解决方案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

【讨论】：

很漂亮。谢谢！

【解决方案2】：

您需要做的就是将容器的右填充设置为 0 并覆盖引导程序放置在其上的最大宽度。

.container {
    padding-right: 0px;
    max-width: none;
}

Demo

编辑：您可以尝试的另一种解决方案是：

.container {
    padding-left: 0px;
    padding-right: 0px;
    margin-right: 0px;
    max-width: none;
}

New Demo

【讨论】：

这似乎适用于 Bootstrap 3.0.0，但不再适用于 3.2.0。
@Mathijs 很奇怪，他们从 3.0 到 3.2 进行了类似的更改。更新了我的答案。
width: initial 使容器变为全宽，因此它有效地将其变成了容器流体。这会导致左列拉伸到页面的左侧，这是不可取的。
我再次更新了我的答案。很难说这些是否对你有用。我只能假设它在小提琴中起作用。
它在小提琴中不起作用：如果您将浏览器屏幕设置得非常宽，您会再次看到整个容器只是粘在页面的右侧。

【解决方案3】：

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

HTML

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

【讨论】：

好吧，只是制作一个非常宽的 :after-element 确实有效，但我发现它是一个丑陋的解决方案。它会导致页面变得非常宽，我知道这可以通过溢出来解决：隐藏，但是......嗯。
你会看到，如果你打算使用 Bootstrap 的容器并且有一个 margin-left:auto，margin-right:auto，那么这就是交易。
是的，不幸的是，恐怕这是实现我想要的唯一可行的方法。

【解决方案4】：

此代码的工作屏幕大小限制为 1200 像素到更大。仅在大于 1200 像素的设备中检查此代码。如果设备尺寸小于 1200px 布局是正常的Demo

.main-box {
  background-color: #ccc;
}

.col-sm-6 {
  height: 50px;
}

.first-col {
  background-color: #f4b334;
}

@media only screen and (min-width: 1200px) {
  .first-col {
    padding-left: calc((100% - 1160px) / 2);
    /* 1160px is your container width or web width*/
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<div class="container-fluid main-box">
  <div class="row">
    <div class="col-sm-6 first-col">
      <h2>Hello World</h2>
      <p>this is example text</p>

    </div>

    <div class="col-sm-6">
    </div>
  </div>
</div>

【讨论】：

【解决方案5】：

如果您使用的是引导程序的 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 - 这两个类在左侧/右侧是流动的，并且只占用与另一个普通容器相同的空间。

【讨论】：

【解决方案6】：

 .container {
    margin: 0 0 0 auto;
    padding-right: 0;
  }

这会将 0 的边距应用于除左侧之外的所有边，左侧设置为自动。然后让第二列与右侧对接，移除填充。

Demo

【讨论】：

这会将整个容器移动到页面的右侧，而我希望容器的左边缘保持在同一位置，而右边缘延伸到页面的右边缘。

【解决方案7】：

我也为同样的事情苦苦挣扎。我现在制作了一个版本，适用于左侧的 1/3 列和右侧的 2/3 + 全宽列。如果有时间，我可以根据所有 col-- 选项添加所有选项。

我所做的是使用 100vw 并减去（使用 SASS 变量）固定宽度和一半以添加到左边距，并在右侧 0 边距。我再次分成 1/3 和 2/3 + 边距的列：

.container-fluid-right {
    width:calc(100vw - 30px) !important;
    overflow-x:visible;
    padding-left:0px;
    padding-right:0px;

    > .row > :first-child {
        padding-left:15px;
        padding-right:15px;
    }
    > .row > :last-child {
        padding-right:0px;
        padding-left:0px;
        float:right;
        margin-right: 0px;

    }


    @include when-sm { 
        > .row > :first-child {
            width:calc(#{$screen-sm-min} * 1 / 3);
            margin-left: calc((100vw - #{$screen-sm-min}) / 2);
        }
        > .row > :last-child {
            width:calc((#{$screen-sm-min} * 2 / 3) +((100vw - #{$screen-sm-min}) / 2));
        }
    }
    @include when-md { 
        > .row > :first-child {
            width:calc(#{$screen-md-min} * 1 / 3);
            margin-left: calc((100vw - #{$screen-md-min}) / 2);
        }
        > .row > :last-child {
            width:calc((#{$screen-md-min} * 2 / 3) +((100vw - #{$screen-md-min}) / 2));
        }
    }
    @include when-lg { 
        > .row > :first-child {
            width:calc(#{$screen-lg-min} * 1 / 3);
            margin-left: calc((100vw - #{$screen-lg-min}) / 2);
        }
        > .row > :last-child {
            width:calc((#{$screen-lg-min} * 2 / 3) +((100vw - #{$screen-lg-min}) / 2));
        }
    }
}

我使用了另一张海报的 when-sm / when-md / when-lg，这些是 mixins：

@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }

对于原始海报布局（8 左 4 右），唯一的区别是切换 1/3 和 2/3

【讨论】：

【解决方案8】：

我遇到了同样的问题，并决定完全跳过 .container 类。我像这样创建了一个名为 .container-only-left 的类

.container-only-left {
    margin-left: calc(50% - 255px);

    @media (min-width: 768px) {
        margin-left: calc(50% - 345px);
    }

    @media (min-width: 992px) {
        margin-left: calc(50% - 465px);
    }

    @media (min-width: 1200px) {
        margin-left: calc(50% - 555px);
    }
}

只要将 .container-only-left 类放在覆盖 100vw 的元素中，这对我有用。

【讨论】：