twitter-bootstrap Twitter 引导网格问题 - 使用响应式缩小窗口大小时项目溢出容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17452791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap grid issues - Items overflow container when downscaling window size using responsive
提问by jezzipin
I'm currently investigating the use of Twitter bootstrap as a foundation for my future web development projects for clients. I have been through all of the standard documentation on their Github page and from my understanding, to use the grid layout effectively, your rows must only contain a total of twelve columns (made up of different elements or a single element).
我目前正在研究使用 Twitter 引导程序作为我未来为客户开发 Web 项目的基础。我已经阅读了他们 Github 页面上的所有标准文档，据我所知，要有效地使用网格布局，您的行必须总共只包含十二列（由不同的元素或单个元素组成）。
With this in mind I have conducted a small test with some text spanning 4 columns in a row along with an offset div spanning 6 columns. This seems to work fine however, I have then tried to include a single row contained a div spanning 3 columns that is offset by 9 columns (still totalling 12) to give the impression that the content within the div is floated right on the page. The issue is that this appears fine when the window mode is suited to a desktop however as I begin to scale the window, the contents of the div are pushed out of the overall container. If I continue to scale down the window, the elements stack as I expect for the mobile view.
考虑到这一点，我进行了一个小型测试，其中一些文本跨越连续 4 列，偏移 div 跨越 6 列。然而，这似乎工作正常，然后我尝试包含一个包含跨越 3 列的 div 的单行，该 div 被 9 列（仍然总共 12）偏移，以给人一种 div 中的内容在页面上浮动的印象。问题是，当窗口模式适合桌面时，这看起来很好，但是当我开始缩放窗口时，div 的内容被推出了整个容器。如果我继续缩小窗口，元素会按照我对移动视图的预期堆叠。
My question is, why is this behaving in this way? My understanding was that as long as there were 12 columns the content would remain encased within their external container.
我的问题是，为什么会这样？我的理解是，只要有 12 列，内容就会保留在其外部容器中。
My code can be found below. There is lots of inline css but this is just for testing purposes. This is stock bootstrap with all options checked at the customisation stage meaning that all of the responsive options are included.
我的代码可以在下面找到。有很多内联 css，但这仅用于测试目的。这是在定制阶段检查所有选项的库存引导程序，这意味着包括所有响应选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<!--BOOTSTRAP-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container-fluid" style="border: 1px solid #cccccc">
<div class="row-fluid">
<div class="span4">This is a div spanning 4 columns</div>
<div class="span6 offset2">This is a div spanning 6 columns. It should appear alongside the column spanning 4 columns.</div>
</div>
<div class="row-fluid">
<div class="span3 offset9">
<form class="form-search">
<div class="row-fluid">
<div class="input-append span2">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn btn-info"><i class="icon-search icon-white"></i> Search </button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
This occurs whether I use the fluid layout or not. In the fluid example the searchbox will appear as if it's going off the screen. In the fixed example it will overlay the grey border of the container.
无论我是否使用流体布局，都会发生这种情况。在流体示例中，搜索框将显示为好像要离开屏幕。在固定示例中，它将覆盖容器的灰色边框。
采纳答案by Bass Jobsen
Have have add your code here: http://bootply.com/66598
已在此处添加您的代码：http: //bootply.com/66598
The image below show your problem / question (i think):
下图显示了您的问题/问题（我认为）：
To understand your problem you will have to study the grid and understand the difference between the default grid and the fluid grid, see: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem
要了解您的问题，您必须研究网格并了解默认网格和流体网格之间的区别，请参阅：http: //twitter.github.io/bootstrap/scaffolding.html#gridSystem
Your problem will happen on screens bigger as 767px width. Below this width columns (div with class="span{x}") will stack. On big screens the problem will don't happen also.
您的问题将发生在 767px 宽度的屏幕上。低于此宽度的列（带有 class="span{x}" 的 div）将堆叠。在大屏幕上也不会发生这个问题。
The default grid (Twitter's Bootstrap 2.x):
默认网格（Twitter 的 Bootstrap 2.x）：
When nesting rows the child row gets a total span which sum up to the span of its parent.
嵌套行时，子行获得总跨度，其总和为其父行的跨度。
Example:
例子：
<div class="row">
<div class="span6">
<!--nesting-->
<div class="row">
<div class="span3"></div>
<div class="span3"></div>
</div>
</div>
<div class="span6">
</div>
</div>
In the grid the span classes have a fixed width in pixels (depending
on screen width), see:
Between 768px and 980px screen width:
Every span1 will be 940 - (11 gutters of 20px) /12 = 60px
(above the 980px (1170-11*30)/12 = 70px).
在网格中，跨度类具有以像素为单位的固定宽度（取决于屏幕宽度），请参阅：
介于 768像素和 980 像素屏幕宽度之间：每个跨度 1 将为 940 -（20 像素的 11 个装订线）/12 = 60 像素（高于 980 像素（1170 -11*30)/12 = 70 像素）。
Now your problem you have set: <input type="text" class="input-medium search-query">The .input-medium will give this input a fixed width of 150px and the
"search" button take also space (75px;).
You put this in a span2 (<div class="input-append span2">) witch is
in a span 3 (<div class="span3 offset9">).
On the default 940 grid a span3 got a width of 3x60 + 2x20 = 220px;
while your seachbox takes 75+150 = 225px. For this reason your
searckbox breaks out of the grid.
A span4 won't have this problem. Of course it will also breaks out your
span2.
现在您已经设置了问题：<input type="text" class="input-medium search-query">.input-medium 将为该输入提供 150 像素的固定宽度，“搜索”按钮也占用空间（75 像素；）。你把它放在 span2 ( <div class="input-append span2">) 中，女巫在 span 3 ( <div class="span3 offset9">) 中。在默认的 940 网格上，span3 的宽度为 3x60 + 2x20 = 220px；而你的搜索框需要 75+150 = 225px。出于这个原因，您的搜索框脱离了网格。span4 不会有这个问题。当然它也会打破你的span2。
The fluid grid (Twitter's Bootstrap 2.x and Twitters Bootstrap 3):
流体网格（Twitter 的 Bootstrap 2.x 和 Twitters Bootstrap 3）：
In the fluid grid every column (span{x}) of get a percentage of the width of it's parent. When nesting the child row can be split in 12 columns again.
在流体网格中，每一列 (span{x}) 都获得其父级宽度的百分比。嵌套时，子行可以再次拆分为 12 列。
Example:
例子：
<div class="row-fluid">
<div class="span6">
<!--nesting-->
<div class="row">
<div class="span6">50% of the parent and 25% of the grid</div>
<div class="span6">50% of the parent and 25% of the grid</div>
</div>
</div>
<div class="span6">
<div class="row">
<div class="span12">100% of the parent and 50% of the grid</div>
</div>
</div>
</div>
In your case your searchbox is nested in a span2 in a span3.
The span3 will get about 25% of the grid width. When 25% of your grid
width will be smaller as 225px the searchbox will break out the grid.
So your problem will start around a screen width of 4 x 225 = 900px
(just below the default grid of 940 pixels).
Also here it will help to put your searckbox in a span 4 or 5.
NOTE <div class="input-append span2">will have a width 16,6% of 25%
of the grid (very small).
在您的情况下，您的搜索框嵌套在 span3 中的 span2 中。span3 将获得大约 25% 的网格宽度。当您的网格宽度的 25% 小于 225px 时，搜索框将打破网格。因此，您的问题将围绕 4 x 225 = 900 像素的屏幕宽度（刚好低于 940 像素的默认网格）开始。同样在这里，将您的搜索框放在跨度 4 或 5 中会有所帮助。 NOTE<div class="input-append span2">的宽度为 25% 的网格（非常小）的16,6 %。
Possible solution: Use a pull-right class for your searchbox:
可能的解决方案：为您的搜索框使用一个右拉类：
<div class="row-fluid">
<div class="span3 offset9">
<form class="form-search">
<div class="input-append pull-right">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn btn-info"><i class="icon-search icon-white"></i> Search </button>
</div>
</form>
</div>
</div>
回答by MThi
I had a similar case. Switched from container (fixed-width) to container-fluid (full-width) It did work for me. Good luck
我有一个类似的案例。从容器（固定宽度）切换到容器流体（全宽）它确实对我有用。祝你好运
Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
流体或固定网格系统，响应式设计，基于 Twitter Bootstrap
