【问题标题】：Bootstrap 3 fluid container not 100% widthBootstrap 3 流体容器不是 100% 宽度
【发布时间】：2014-09-18 04:06:48
【问题描述】：

问题

我正在考虑在我的项目中实现 Bootstrap 3，并在切换到这个前端框架之前测试它的一些功能和属性。

我注意到的奇怪之处在于，流畅的 Bootstrap 容器实际上并没有跨越 100% 的视口宽度（请注意粉红色 Bootstrap 元素右侧的 1px 线）：

这就是我的 HTML 的样子。它基本上是默认的 Bootstrap 模板。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page title</title>
        <link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
        <link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="full-width">This is not bootstrap</div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    This is Bootstrap
                </div>
                <div class="col-md-9">
                    This is Bootstrap too
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

显然我使用标准的、最新的 CSS 版本的引导程序和我自己的自定义 CSS：

.full-width {
    width: 100%;
    background-color: #808080;
}
.col-md-3 {
    background-color: #4f4;
}
.col-md-9 {
    background-color: #f4f;
}

为什么这个流体容器不跨越 100% 的宽度？虽然只有 1px，但肯定会破坏我的页面设计。

问题娱乐

我根据要求创建了一个关于此问题的 jsfiddle：http://jsfiddle.net/J6UE5

要重新创建我的问题，请在运行 OS X 10.9.4 的 Mac 上使用 Safari (7.0.5) 调整视口大小。您会注意到粉红色容器右侧的 1px 线在调整大小时出现和消失。一旦绿色和粉色容器堆叠（引导行为），1px 线就会消失，所有内容都是 100% 宽度。

【问题讨论】：

你能覆盖容器 CSS 的填充吗？

标签： css twitter-bootstrap width containers fluid-layout

【解决方案1】：

.container 元素在 Bootstrap 中添加 15px 的内边距。

.row 的左右边距为 15px，并且

.column 有 15px 的内边距。

覆盖 CSS 中的容器填充值（并确保将它们放在自举代码之后，以便正确覆盖）。

.container { 
  padding: 0px;
}

这里有更多关于容器、容器流体、行和列如何工作的解释

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

【讨论】：

【解决方案2】：

您是否在自定义 css 文件中添加了这一行！

body {
       width: 100%;
       margin: 0%;    
}

/************************************************ ******************************************/

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page title</title>
        <link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
        <link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            .full-width {
                max-width:100%;
                top:0;
                left:0;
                min-height: 100%;
                min-width: 1024px;
                background-color: #808080;
            }
            .col-md-3 {
                background-color: #4f4;
            }
            .col-md-9 {
                background-color: #f4f;
            }

            body {
                width: 100%;
                margin: 0%;
            }
        }
    </style>

    </head>
    <body>
        <div class="full-width">This is not bootstrap</div>
        <div class="container-fluid">
            <div class="col-md-12">
            <div class="row">
                <div class="col-md-3">
                    This is Bootstrap
                </div>
                <div class="col-md-9">
                    This is Bootstrap too
                </div>
            </div>
        </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

【讨论】：

Bootstrap 核心 CSS 文件已经包含边距：0；为身体标签。添加宽度：100%；不幸的是没有成功。
你也可以使用媒体查询。

【解决方案3】：

 <div class="row" style="margin-left: -30px; padding: 0px;  background-color: rgba(255, 3, 53, 0.49);">
     <div class="col-lg-12">
           <p style="color: green;">Foo</p>
         </div>
</div>

【讨论】：

请尽量添加至少小的评论，说明答案中的代码与问题的关系。谢谢

【解决方案4】：

试图重现该问题，但似乎无法

尝试将引导 css、bootstrap.css 更改为 bootstrap.min.css

编辑：是否有任何其他 css 文件您正在快速拉入 http://www.bootply.com/OOpfKfAAMh 显示其工作正常，侧面没有 1px 空白

【讨论】：

不幸的是，我无法让 bootply 链接正常工作。它显示应用程序错误。我创造了一个小提琴供人们观看。尝试在装有 OS X 10.9.4 的 Mac 上使用 Safari (7.0.5) 重新创建它 - 如果可能的话。 jsfiddle.net/J6UE5.