我已经找到了一个很好的解决方案， Package 容器类被用来改变它下面的容器的行为，而不是全局地改变它。
此外，右边距：0用于设置容器流体的右距，可以使用margin-left：0以将其设置为流体到另一侧。
B：如果容器没有到达屏幕的边缘，只需从列中删除填充。

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

第一个

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

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

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

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

New Demo

演示：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;
}

此代码工作屏幕大小限制为1200px以上。仅在大于1200px的设备中检查此代码。如果设备大小小于1200px，则布局为正常Demo
第一个

如果您使用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-这两个类在左侧/右侧将是流体，而在另一侧仅在与普通容器相同的空间中是阻塞的。

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

这会将0边界套用至所有边，但左边除外，左边设定为自动。然后移除填补，让第二栏与右边对齐。
Demo

我也做了同样的事情。我现在做了一个版本，适用于左边1/3列和右边2/3 +全宽列。如果时间足够，我可以基于所有的col-- 选项添加所有的选项。
我所做的是使用100 vw并减去（使用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，这些是混合：

@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左右

我也遇到了同样的问题，决定直接跳过.container类。

.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类被放在一个覆盖100 vw的元素中，这对我就有效。