【问题标题】:using container-fluid within bootstrap cause horizontal scrollbar在引导程序中使用容器流体导致水平滚动条
【发布时间】:2014-07-09 04:59:43
【问题描述】:

这是一个简单的例子:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">DUMMY CONTENT</div>
    </div>
</div>

Demo in Fiddle

当我在浏览器中看到结果时,我会看到一个水平滚动条。

为什么会这样?

我做错了什么?

【问题讨论】:

    标签: css twitter-bootstrap twitter-bootstrap-3 grid-system


    【解决方案1】:

    container-fluid最初是从Bootstrap 3.0中取出来的,但是added back in 3.1.1

    要解决此问题,您可以任一

    1. 使用newer version of Bootstrap style sheet

      Demo with New Style Sheet in Fiddle

    2. 或者自己添加类

      .row 向左右添加了15px 边距。由于.container-fluid 填满了屏幕宽度的100%,因此额外的边距空间会导致溢出问题。

      要解决此问题,您需要向.container-fluid 类添加填充

      .container-fluid {
          padding-right: 15px;
          padding-left: 15px;
          margin-right: auto;
          margin-left: auto;
      }
      

      Demo with Custom container class in Fiddle

    【讨论】:

    • 更新引导程序(从 3.0.0 到 3.3.7)对我来说是最简单的方法。像魅力一样工作!
    • auto 边距不是必需的。
    【解决方案2】:

    我也遇到过这个问题。我不知道问题的原因。这可能是来自Twitter Bootstrap 的错误。现在,我必须手动将overflow-x:hidden 添加到我的body 标签:

    body { 
       overflow-x: hidden;
    }
    

    Jsfiddle

    【讨论】:

    • Lvarayut,有趣的解决方法。真正的问题是 Bootstrap v3.0 根本不包含.container-fluid!打开你的控制台,看看有多少匹配的规则出现,或者通过样式表 Ctrl + F。最简单的解决方法是获取 3.1 版的最新样式表
    • 这个解决方案非常好,谢谢!奇怪的是,在 body 左右添加 5px 边距对我来说也是一样的,同时仍然让网站组件完全“触摸”画布的边缘(使用 24 列和 15px 间距)
    • 您应该注意,此解决方法仅隐藏滚动条,您的布局仍然可以“左右移动”。如果您的目标设备是平板电脑或移动设备,那么这将成为一个问题,因此您的页面访问者在向下滚动时将您的网站向左移动。恕我直言,糟糕的用户体验;)
    • 非常感谢!对于移动设备,我还必须添加 overflow-x: hidden;到 html {} 也是如此。
    【解决方案3】:

    在我的情况下,这个修复效果很好:

    .row {
      margin-left: 0;
      margin-right: 0;
    }
    

    【讨论】:

      【解决方案4】:
      .row{
      margin: 0px;
      }
      

      快速轻松解决这就是您所需要的一切

      【讨论】:

      • 你成就了我的一天!
      【解决方案5】:

      确保用容器封装你的行类。

      <div class="container">
          <div class="row">
              text
          </div>
      </div>
      

      容器用+15 偏移行上的-15 边距。

      【讨论】:

      • 这个答案会导致页面不是全宽的。如果您使用的是流体,那就是这样的想法,不是吗?
      • 我发现在容器流体中添加我的行就可以了
      【解决方案6】:

      您可以通过将新类添加到全宽行并创建覆盖 css 文件来破坏该行:

      .noLRMar{
        margin-right: 0 !important;
        margin-left: 0 !important;
       }
      <div class="row noLRMar">
        
       </div>

      【讨论】:

      • Bootstrap 4 具有内置的 mx-0 类,可以做到这一点。
      【解决方案7】:

      就我而言,将@grid-gutter-width 更改为奇数会导致这种情况,因为;

      mixins/grid.less

      .container-fixed(@gutter: @grid-gutter-width) {
        margin-right: auto;
        margin-left: auto;
        padding-left:  floor((@gutter / 2));
        padding-right: ceil((@gutter / 2));
        &:extend(.clearfix all);
      }
      

      所以如果你选择一个奇怪的gutter-width,那么你最终会得到不均匀的填充,你会看到一个水平滚动条。

      【讨论】:

        【解决方案8】:

        我遇到了同样的问题,单独使用 .container-fluid 会创建水平滚动,但我使用嵌套的 .container 修复了它,希望对您有所帮助!

        <div class="container-fluid">
            <div class="container">
            </div>
        </div>
        

        【讨论】:

        • 您重复了一个已经多次给出的答案,这是错误。使用.container-fluid 的全部意义在于让.row 扩大视口的整个宽度。将.row 包装在.container 中会破坏使用.container-fluid 的目的。此外,可以通过在.container-fluid 上设置15px 的左右填充(以抵消.row 的负边距)或将Bootstrap 从v3.0 升级到v3.3.7(其中包含填充修复)来解决此问题)。作为侧节点,在这种情况下不需要自动边距。
        【解决方案9】:

        使用 Bootstrap 3.3.5,在从中等 (md) 到小 (sm) 屏幕尺寸的变化附近,我得到了一个特定宽度的水平滚动条。在我的div.container-fluiddiv.container 之间添加div.row 为我修复了它。

        <div class="container-fluid  myFullWidthStylingClass">
            <div class="row">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            #content
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

        margin:0; 添加到您的行会破坏一些样式元素。

        【讨论】:

        • 这是不正确的。根据引导文档,只有列应该是行的直接子级。并且行不能是另一行的孩子。来自 Bootstrap 的文档:“内容应该放在列中,并且只有列可以是行的直接子级。”
        【解决方案10】:

        在容器类中设置 max-width 而不是宽度。它将删除单杠。

        .container-fluid { 
            border:1px solid red;
            max-width:1349px;
            min-height:1356px;
            padding:0px;
            margin:0px; 
        }
        

        【讨论】:

        • 这没有意义。您正在使用 .container-fluid 因为您不想拥有最大宽度。
        猜你喜欢
        • 2018-06-20
        • 1970-01-01
        • 2015-09-30
        • 2021-07-15
        • 1970-01-01
        • 2012-11-14
        • 2016-02-08
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多