问题

Question

问题

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

我注意到的一个奇怪的事情是，一个流体的Bootstrap容器实际上并没有超出视口宽度的100％（请注意粉红色Bootstrap元素右侧的1px行）：

image http://i58.tinypic.com/29lzrwl.png

这就是我的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版本的bootstrap和我自己的自定义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线出现并在调整大小时消失。一旦绿色和粉红色容器堆叠（Bootstrap行为），1px线就会消失，一切都是100％宽度。

Answer 1

.container元素在Bootstrap中添加了15px的填充。

.row的左右边距为负15px，

.column有15px填充。

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

.container { 
  padding: 0px;
}

有关容器，容器流体，行和列如何在此处工作的更多说明

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

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

Answer 3

尝试重新创建该问题，似乎无法

尝试将bootstrap css，bootstrap.css更改为bootstrap.min.css

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

Answer 4

 <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>

Answer 5

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

Bootstrap 3流体容器不是100％宽度

问题

问题娱乐

5 个答案: