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

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

【问题讨论】:

标签: 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;
          }
        }
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2018-11-30
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-04-12
          相关资源
          最近更新 更多