6

我目前正在研究使用 Twitter 引导程序作为我未来客户 Web 开发项目的基础。我已经阅读了他们 Github 页面上的所有标准文档，据我了解，要有效地使用网格布局，您的行必须总共只包含十二列（由不同的元素或单个元素组成）。

考虑到这一点，我进行了一个小测试，其中一些文本连续跨越 4 列，偏移 div 跨越 6 列。这似乎工作正常，但是，我随后尝试包含一个包含跨 3 列的 div 的单行，该 div 偏移 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>

无论我是否使用流体布局，都会发生这种情况。在流畅的示例中，搜索框将出现，就好像它正在离开屏幕一样。在固定示例中，它将覆盖容器的灰色边框。

4

2 回答 2

4

已在此处添加您的代码：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>

在网格中，跨度类具有以像素为单位的固定宽度（取决于屏幕宽度），请参阅：
在 768 像素和 980 像素之间的屏幕宽度：每个跨度1 将是 940 -（11 个 20 像素的排水沟）/12 = 60 像素（高于 980 像素（1170 -11*30)/12 = 70 像素)。

现在你已经设置了你的问题：<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 和 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">的宽度为 25% 的网格的 16.6%（非常小）。

可能的解决方案：为您的搜索框使用 pull-right 类：

  <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>
于 2013-07-06T23:15:06.887 回答
1

我有一个类似的案例。从容器（固定宽度）切换到容器流体（全宽）它确实对我有用。祝你好运

响应式设计的流动或固定网格系统，基于 Twitter Bootstrap

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

于 2016-05-09T12:36:51.363 回答