Twitter引导网格问题 - 使用响应缩减窗口大小时,项目溢出容器
jez*_*pin 6 responsive-design twitter-bootstrap
我目前正在调查使用Twitter引导程序作为我未来为客户开发Web开发项目的基础.我已经浏览了他们的Github页面上的所有标准文档,并且根据我的理解,为了有效地使用网格布局,您的行必须只包含总共十二列(由不同的元素或单个元素组成).
考虑到这一点,我进行了一项小测试,其中一些文本连续4列,并且偏移的div跨越6列.这似乎工作正常但是,我已经尝试包含一个包含div的3行,这些列被9列(总共12列)偏移,给人的印象是div中的内容在页面上浮动.问题是当窗口模式适合桌面时这看起来很好但是当我开始缩放窗口时,div的内容被推出整个容器.如果我继续按比例缩小窗口,则元素将按照我对移动视图的预期进行堆叠.
我的问题是,为什么这样做？我的理解是,只要有12列,内容就会被保留在外部容器中.
我的代码可以在下面找到.有很多内联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>
无论我是否使用流体布局,都会发生这种情况.在流体示例中,搜索框将显示为离开屏幕.在固定示例中,它将覆盖容器的灰色边框.
已在此处添加您的代码： http: //bootply.com/66598
下图显示了您的问题/疑问（我认为）：
要理解您的问题，您必须研究网格并了解默认网格和流体网格之间的区别，请参阅：http ://twitter.github.io/bootstrap/scaffolding.html#gridSystem
您的问题将发生在宽度为 767px 的屏幕上。低于此宽度的列（带有 class="span{x}" 的 div）将堆叠。在大屏幕上，这个问题也不会发生。
默认网格（Twitter 的 Bootstrap 2.x）：
嵌套行时，子行获得总跨度，其总和等于其父行的跨度。
例子：
<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>
在网格中，span 类具有以像素为单位的固定宽度（取决于屏幕宽度），请参阅：
在 768px 和 980px 屏幕宽度之间：每个 span1 将为 940 - （11 个 20px 的间距）/12 = 60px（高于 980px (1170 -11*30)/12 = 70px)。
现在您已经设置了问题：<input type="text" class="input-medium search-query">
.input-medium 将为该输入提供 150px 的固定宽度，并且“搜索”按钮也占用空间（75px；）。你把它放在一个 span2 ( <div class="input-append span2">) 中，而它放在一个 span 3 ( <div class="span3 offset9">) 中。在默认的 940 网格上，span3 的宽度为 3x60 + 2x20 = 220px；而你的搜索框需要 75+150 = 225px。因此，您的搜索框会脱离网格。span4不会有这个问题。当然它也会突破你的span2。
流体网格（Twitter 的 Bootstrap 2.x 和 Twitter 的 Bootstrap 3）：
在流体网格中，每一列 (span{x}) 都获取其父级宽度的百分比。嵌套时，子行可以再次拆分为 12 列。
例子：
<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>
在您的情况下，您的搜索框嵌套在 span3 中的 span2 中。span3 将获得大约 25% 的网格宽度。当网格宽度的 25% 变小为 225px 时，搜索框将打破网格。因此，您的问题将从 4 x 225 = 900px 的屏幕宽度开始（正好低于 940 像素的默认网格）。同样在这里，它将有助于将您的搜索框放在 4 或 5 的范围内。NOTE 的<div class="input-append span2">宽度将为网格的 25% 的 16.6%（非常小）。
可能的解决方案：为您的搜索框使用右拉类：
<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>