如何在没有水平滚动条的情况下使bootstrap 3流畅布局

68

这是示例链接：http : //bootply.com/76369

这是我使用的html。

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

引导程序3没有容器流体和行流体。

我不能用.container类包装它，因为它将变成固定的布局。

如何使其流畅（全页面宽度）布局？（不带水平滚动条）

这些标记。当您在结果中查看时，x滚动条可见，因此您可以向左和向右滚动，而不应该滚动。

编辑日期：2015-12-09
自3.1.0版以来，已有答案且Bootstrap已发布此修复程序

html  twitter-bootstrap  twitter-bootstrap-3 
— 威
source
滚动条似乎是bootply的副作用。当使用cssdeck和我自己的网站时，没有滚动条出现。您可以单击“显示器”图标，然后在弹出窗口中看到没有滚动条。
— 凯文·鲍尔索克斯
1
— ta.speot。是
3
滚动条不是引导播放的效果。它甚至出现在我的本地主机上。并且在cssdeck没有引导程序3，它只有引导程序2
— vee

Answers:

14

这是在v3.1.0中引入的：http ://getbootstrap.com/css/#grid-example-fluid

提交＃62736046添加了“用于全宽容器和布局的.container-fluid变体”。

— 马丁
source
57

我也有它，在等待他们修复它时，我添加了这个可耻的CSS：

body { overflow-x: hidden;}

这是一个可怕的选择，但确实有效。当他们解决此问题后，我很乐意将其删除。

正如该问题所指出的，另一种替代方法是覆盖.row：

.row {
  margin-left: 0px;
  margin-right: 0px;
}
— 西里尔·N。
source
1
或将以下内容添加到您的容器div（放置.row的位置）中，如@davidpauljunior建议的那样：padding：0 15px; 左边距：0px; 右边距：0px;
— Jorre 2013年
将.row左右边距设置为“ 0”将导致div边缘模糊。所以我最好使用body { overflow-x: hidden; }和调整padding。
— 查理
11

这是BS 3中的一个已知问题-https: //github.com/twbs/bootstrap/issues/9862?source=cc

我已经使用最新版本在Bootply上进行了测试，因此请继续关注GitHub以获取最新更新/修复。

在Bootstrap 3中，.row必须在.container或内部使用，.container-fluid以抵消行上的负边距。这将消除水平滚动条。

从文档...

“必须将行放置在.container（固定宽度）或.container-fluid（全角）内，以正确对齐和填充。”

引导程序4

该container> row>col关系工作方式一样3.X ...

“容器是Bootstrap中最基本的布局元素，在使用我们的默认网格系统时是必需的”

— 齐姆
source
1
此问题已重新打开。
— Ra在
11
因此，在解决此问题之前，您只需要添加自己的<div class="container-fluid">名称（或您想要的任何名称）并赋予它margin-left: 15px; margin-right: 15px;即可抵消的负边距row。
— davidpauljunior
5
padding: 0 15px;是Bootstrap文档中提供的指南：getbootstrap.com/css/#grid-intro
— Zim
文档中提供的指导无效，但davidpauljunior的建议可行！
— Jorre 2013年
8

如果我理解正确，那么在任何媒体查询之后添加此设置将覆盖默认网格的宽度限制。我需要引导宽度为100％的bootstrap 3上适合我的作品

.container {
   max-width: 100%;
   /* This will remove the outer padding, and push content edge to edge */
   padding-right: 0;
   padding-left: 0;
 }

然后，您可以将行和网格元素放入容器中。

— 花花公子
source
8

2014年更新，来自Bootstrap文档：

网格和全宽布局想要创建完全流畅的布局（即您的站点将视口延伸到整个宽度）的人们必须将其网格内容包装在包含元素的内边距中：0 15px; 抵消边距：0 -15px; 用于.rows。

— 塔米克·索齐耶夫（Tamik Soziev）
source
5

这里只有我的2美分。通常，这将对您有效，就像对我一样。

body > .row {
    margin-left: 0px;
    margin-right: 0px;
}
— MK
source
提供了边距以抵消给.col- *类的填充。添加此代码段会将边距放回原处。如果您要再次删除边距，则可以添加以下内容：.container-full .row> * {padding：0px; }
— Ian Jennings 2014年
3

我遇到了同样的问题（想要流畅的布局），但想保留响应选项，并重新排列列，以此类推，以便在较小的屏幕上显示，并最终对variables.less进行了少量更改：

// Large screen / wide desktop  (last row of file)
@container-lg-desktop:        100%; //((1140px + @grid-gutter-width));

此值在grid.less中使用一次并设置

@media (min-width: @screen-lg-desktop) {
  .container {
    max-width: @container-lg-desktop;
  }
  ....
}

结果是超过1200像素的网格是流畅的（没有水平滚动条）。在此之下，适用常规响应规则。当然，您也可以轻松地将其设置为其他媒体查询。

如果您不想自己编辑和编译.less，则可以将自己的样式表中的maxwidth覆盖如下：

@media (min-width: 1200px) {  /* or min-width: wherever-you-want-your-fluid-breakpoint */
  body .container {
    max-width: 100%;
  }
}

所有这些都假定您使用普通的Bootstrap网格语法，包括容器，如下所示：

<div class="container">
  <div class="row" >
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div>

希望这可以帮助！

— 胜利者
source
2

如果container-fluiddiv直接放置在内，则可以显示水平滚动条body。

使用container-fluid结构的正确方法是：

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <!-- content goes here -->
            </div>
        </div>
    </section>
</body>

因此，请尝试将container-fluidDIV包装在外部div内，例如a<div id="wrap">或a<section>或<article>or<aside>或其他Specialized<div>，然后保存！没有水平滚动条。

— 茜草属
source
1

在Bootstrap 3中，将列直接放在主体下面应该可以使您的布局流畅，而无需水平滚动条

<body>
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</body>
— 伯
source
1

Bootstrap 3.0版本很棘手，他们将为此问题添加修复程序，并可能在Bootstrap 3.1中返回容器流体。但在此之前，这里是我正在使用的修复程序：

首先，您将需要自定义容器并将其设置为100％的宽度，然后您将需要修复行边距处置，如果需要的话，还需要修复导航栏：

/* Custom container */
.container-full {
  margin: 0 auto;
  width: 100%;
}

/*fix row -15px margin*/
.container-fluid {
    padding: 0 15px;
}

/*fix navbar margin*/
.navbar{
  margin: 0 -15px;
}

/*fix navbar-right margin*/
.navbar-nav.navbar-right:last-child {
  margin-right: 0px;
}

您可以在root div上堆叠container-full和container-fluid类，以后可以使用container-fluid。

希望对您有所帮助，如果您需要更多信息，请告诉我。

— 博扬
source
1

找到了解决方法

.row {
  margin-left: 0;
  margin-right: 0;
}
[class^="col-"] > [class^="col-"]:first-child,
[class^="col-"] > [class*=" col-"]:first-child
[class*=" col-"] > [class^="col-"]:first-child,
[class*=" col-"]> [class*=" col-"]:first-child,
.row > [class^="col-"]:first-child,
.row > [class*=" col-"]:first-child{
  padding-left: 0px;
}
[class^="col-"] > [class^="col-"]:last-child,
[class^="col-"] > [class*=" col-"]:last-child
[class*=" col-"] > [class^="col-"]:last-child,
[class*=" col-"]> [class*=" col-"]:last-child,
.row > [class^="col-"]:last-child,
.row > [class*=" col-"]:last-child{
    padding-right: 0px;
}
— 亚瓦诺斯塔
source
1

这对我有用。我添加了样式内联以删除右侧的小边距。我真的不喜欢进行内联样式设置，但是html中的这种孤独样式属性使我很容易记住有关拼接到本来很好分开的代码中的hack-job。这也消除了我在引导程序默认样式表之前或之后加载外部样式的麻烦。

<div class="row" style="margin-right:0px;">
  <div class="col-md-6">
  <div class="col-md-6">
</div>
— ShadeTreeDeveloper
source
1

如果对某人仍然可行，我的解决方案如下：

.container{
    overflow: hidden;
    overflow-y: auto;
}
— 泽朱尔
source
0

默认情况下它已经流畅了。如果您想col-md-6使用较小的宽度而不是使用col-sm-6或，则应保持流畅col-xs-6。

— 巴特·卡利克斯托（Bart Calixto）
source
是的，我知道它已经很流畅了，但是它的水平滚动条不正确。
— 2013年
水平滚动条？您的代码看起来有些不好。如果可以的话，发布小提琴，我们将为您提供帮助。您是否将主代码放入容器中？
— Bart Calixto
什么不好？每件事都是正确的，如文件所述。只需将该html粘贴到包含bootstrap 3 css的.html文件中即可。它应该显示完整的页面网格布局。只是。
— 2013年
我看不到水平滚动条。
— Bart Calixto
0

您可以在不打扰引导CSS的情况下解决此问题，并等待下一个版本的修复，因此您可以通过使用padding定义自己的类.container-fluid来包装行。

//Add this class to your global css file
<style>
   .container-fluid {
       padding: 0 15px;  
   }
</style>

   //Wrap your rows in within this .container-fluid 
   <div class="container-fluid">
      <div class="row">
          <div class="col-md-3">content</div>
          <div class="col-md-9">content</div>
          <div class="col-md-3">content</div>
      </div>
   </div>
— 苏达山
source
0

如果所有子元素都是行，则可以在body元素的侧面添加10px的填充

body {
  padding: 0 10px;
}

如果您的HTML标记看起来像这样：

<body>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</body>

这些行的负边距为10像素。这就是造成溢出的原因。如果在主体上添加10px填充，它们将互相抵消。

— 姆拉登·丹尼克（Mladen Danic）
source
0

唯一对我有帮助的是将其设置在我的html DOMmargin:0px的最顶层<div class="row">。

这再次不是解决问题的最吸引人的方法，但是因为它只是放在一个地方，所以我将其内联。

顺便说一句，容器流体和明显的引导程序修复仅在可见页面的两侧引入了增加的空格... :(尽管我通过反复阅读github问题来了解解决方案，所以值得一读。

— 大卫
source
0

在一个答案中总结最相关的评论：

  • 这是一个已知的错误
  • 有解决方法，但您可能不需要它们（请继续阅读）
  • 当元素直接放置在体内而不是容器流体div或另一个包含div的元素中时，就会发生这种情况。大多数人在本地进行测试时，正是将它们直接放置在体内。一旦将代码放置在整个页面中（因此位于容器流体或另一个容器div中），您将不会遇到此问题（无需更改任何内容）。
— j
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.