设置引导无响应的 div答案

【问题标题】：set bootstrap non-responsive divs设置引导无响应的 div
【发布时间】：2012-09-02 21:14:31
【问题描述】：

我已经从<head> 中删除了 bootstrap-responsive.css 链接，但我的页面仍然是响应式的。我有三个<div class"row">，每个都有树<div class="span4"> 来保存一些数据，一切看起来都像一个3x3 的正方形。我的分辨率是 1600x872，“正方形”看起来很完美，但是当我调整浏览器窗口的大小时，div 变得疯狂，看起来像一个矩形。我只想让 div 保持它们的位置，这意味着当我调整窗口大小时，会出现滚动条。你有解决办法吗？

【问题讨论】：

如果您删除bootsrap-responsive.css，您几乎不可能在您的网站中保留响应式设计。可以发jsfiddle 向我们展示您的问题吗？
查看我的最后一个答案。相信它，即使bootstrap-responsive.css 出局，该设计仍然具有响应性。谢谢！

标签： css twitter-bootstrap

【解决方案1】：

您是否将行包装在 .container div 中？

当您不使用.container 时，行中的.span4 元素会在您减小屏幕宽度时为您提供“矩形”效果。

您可以在这个 jsbin 示例中对其进行测试。顶行没有包裹在.container 中，但底行是。

http://jsbin.com/okogis/1

http://jsbin.com/okogis/1/edit

       <!-- this row has no .container, and will 
look like a rectangle when you reduce screen width -->
       <h4>NO .container</h4>  
        <div class="row">
          <div class="span4">
            <div class="spacer200 a1"></div>
          </div>
            <div class="span4">
             <div class="spacer200 a2"></div>
          </div>
            <div class="span4">
              <div class="spacer200 a3"></div>
          </div>
        </div>  

          <div class="spacer50"></div> 

        <!-- this row does have a .container, 
             and will not give the rectangle effect -->
        <div class="container">
          <h4>.container wrapping the row</h4>  
          <div class="row">
            <div class="span4">
              <div class="spacer200 a1"></div>
            </div>
              <div class="span4">
               <div class="spacer200 a2"></div>
            </div>
              <div class="span4">
                <div class="spacer200 a3"></div>
            </div>
          </div> 
        </div>

【讨论】：

因为我无法处理响应式设计，我认为使用无响应的设计将是答案，但后来我看到只有.contaier 内的一些 div，而不是全部，这就是视图问题的根源。现在一切都在容器内并且是响应式的。感谢您的帮助！