使引导容器只有左边距答案

【问题标题】：Make bootstrap container have only left margin使引导容器只有左边距
【发布时间】：2017-12-19 09:27:57
【问题描述】：

有没有办法让引导容器只有一侧（左侧）有边距？我希望右侧拉伸到屏幕末尾...请帮助...

【问题讨论】：

@MrLister 是的，试过了。如果我添加 margin-right 0，整个容器向右移动
对于未来使用 Bootstrap 4 的读者：stackoverflow.com/questions/56778466/…

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

根据您的查询，我了解到您需要将容器的左边框保持原样，但将容器的右边框拉伸到浏览器窗口的右边缘。我在下面发布一个小提琴。请检查它是否适合您。

https://jsfiddle.net/rhythm19/27x014oc/

基本上，这是您需要添加的内容才能获得右边缘的容器。

@media (min-width:768px){
  .container-right {
    margin-right: 0;
    margin-left: calc(50vw - 375px);
  }
}

@media (min-width:992px){
  .container-right {
    margin-right: 0;
    margin-left: calc(50vw - 485px);
  }
}

@media (min-width:1200px){
  .container-right {
    margin-right: 0;
    margin-left: calc(50vw - 585px);
  }
}

【讨论】：

【解决方案2】：

使用 Css3，您可以使用 calc 函数为您的 align right 容器找到正确的宽度。

这样的事情应该可以工作：

.container-right {
  padding-left: 15px; //-> Add the default container padding on the left
  margin-left: auto; //-> Align your container to the right
  width: calc(1199px + (50% - 1199px / 2)); //-> The container width is based on the current breakpoint bootstrap container width
}

然后为每个引导断点复制这个（575px / 767px / 991px / 1199px / 1599px）

【讨论】：

【解决方案3】：

只需更改 .container css 属性，例如：

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

如果您希望容器不向右移动，您必须将容器宽度从 1170px 更改为 1260px（如果您使用 Bootstrap 3）试试这个

@media (min-width: 1200px){
    .container {
       width: 1260px;
    }
}

【讨论】：

是的，因为你有静态容器宽度，如果你想让容器不向右移动，你必须增加你的容器宽度。让我更新答案

【解决方案4】：

首先，.container 没有边距。

我也会像这样从 .container-fluid 开始：

.container-fluid {
  width: auto !important;
  margin-right: 0 !important;
  margin-left: 25% !important;
}

.inner {
  background: brown;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="inner">Container</div>
</div>

示例：https://jsfiddle.net/wk0yeny5/

【讨论】：

容器仍在向右移动..（我正在使用引导程序 3.3.7）
你能张贴你想要完成的截图吗？这个答案似乎完全符合您的要求，或者您需要重新表述您的问题......
我希望容器（边距为 0 的容器）与普通容器对齐...在我上面评论的 jsfiddle 链接中，容器向右移动

【解决方案5】：

我遇到了同样的问题。 Bootstrap 流体容器在小屏幕上看起来很棒，或者在 CodePen 中代码窗口占据了左侧的排水沟，但是一旦你进入全屏，缺少左边距就非常难看。

幸运的是，Bootstrap 有一个内置的方法来处理这个问题。

只需使用 col-xx-offset-*

例如：

<div class="row">
   <div class="col-md-11 col-md-offset-1">...</div>
</div>

当你的屏幕很小时，左边的装订线会消失，只有在全屏时才能看到。

这篇文章对找到该解决方案非常有用：https://www.sitepoint.com/understanding-bootstrap-grid-system/

【讨论】：

【解决方案6】：

最好的方法是创建和使用半容器盒

@media (min-width:768px) {
  .container-half {
    width: 360px;
  }
}
@media (min-width:992px) {
  .container-half {
    width: 480px;
  }
}
@media (min-width:1200px) {
  .container-half {
    width: 570px;
  }
}

【讨论】：