Question

我目前正在研究使用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>

无论是否使用流体布局，都会发生这种情况。在流体示例中，搜索框将显示为离开屏幕。在固定示例中，它将覆盖容器的灰色边框。

Answer 1

已在此处添加您的代码：http://bootply.com/66598

下图显示了您的问题/问题（我认为）： enter image description here

要了解您的问题，您必须研究网格和了解默认网格和流体网格之间的区别，见：http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

您的问题将发生在宽度为767px的屏幕上。在这下面 width columns（div with class =“span {x}”）将堆叠。在大屏幕上问题也不会发生。

默认网格（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">）女巫的位置在跨度3（<div class="span3 offset9">）。在默认的940网格上，span3的宽度为3x60 + 2x20 = 220px; 而你的seachbox需要75 + 150 = 225px。出于这个原因，你的 searckbox突破了网格。 span4不会有这个问题。当然它也会打破你的跨距2。

流体网格（Twitter的Bootstrap 2.x和Twitters 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的范围内。注意<div class="input-append span2">的宽度为16％的16％网格（非常小）。

可能的解决方案：为搜索框使用右拉类：

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

Answer 2

我遇到了类似的情况。从容器切换（固定宽度）容器液（全宽）它对我有用。祝你好运

Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap

http://getbootstrap.com/css/#grid

Twitter引导网格问题 - 使用响应缩减窗口大小时，项目溢出容器

2 个答案: