Question

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

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

设置bootstrap无响应div

1 个答案: