Question

有没有办法让bootstrap容器只在一侧（左侧）有边距？我希望右侧延伸至屏幕尽头......请帮助......

Answer 1

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

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

如果您希望容器不向右移动，则必须将容器宽度1170px更改为1260px（如果您使用了Bootstrap 3）请尝试此

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

Answer 2

首先，.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/

Answer 3

我有同样的问题。 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/

Answer 4

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

类似的事情应该起作用：

.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）重复此操作

Answer 5

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

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

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

使bootstrap容器只剩下边距

6 个答案: