1

请原谅这个关于 Bootstap 响应式布局的新问题。我只是在尝试使用我认为是流体嵌套网格的布局。我在所有列上都设置了血腥的背景颜色，这样我就可以看到它们的开始和结束位置。布局看起来不错，但如果我通过缩小浏览器来调整浏览器的大小，我希望在某个阶段，随着空间变窄，最右边的字段集会移动到黄色字段下方。但是，两列都变窄了。我可能缺乏一些基本的了解，并且非常感谢任何帮助。这是我的完整页面代码：

     <!DOCTYPE html>
     <html>
     <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
   </head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
  <a class="brand" href="#">Your Company</a>
  <div class="navbar-content">
    <ul class="nav">
      <li class="active">
        <a href="#">Home</a> 
      </li>
      <li>
        <a href="#">About</a> 
      </li>
      <li>
        <a href="#">Contact</a> 
      </li>
    </ul>
  </div>
 </div>
 </div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2" style="background-color:aqua">
  <ul class="nav  nav-list nav-stacked">
    <li class="nav-header">SETTINGS</li>
    <li class="active">
      <a href="#">Subnavigation One</a> 
    </li>
    <li>
      <a href="#">Subnavigation Two</a> 
    </li>
    </ul>
    </div>
   <div class="span10">
    <form>
    <div class="row-fluid" style="background-color:gray">
    <h2 class="page-header">Heading in div .row-fluid within a div .span10</h2>  

        <div class="row-fluid">
            <div class="span5">
                <fieldset style="background-color:yellow">
                    <legend>Yellow Fieldset, in a div .span5</legend>
                    <label>Label name</label>
                    <input type="text" placeholder="Type something…"/>
                    <span class="help-block">Example block-level help text here.</span>
                    <label class="checkbox">
                      <input type="checkbox" /> Check me out
                    </label>
                    <button type="submit" class="btn">Submit</button>
                </fieldset>
            </div>
             <div class="span7">
                <fieldset style="background-color:green">
                    <legend>Green Field Set, in a div .span7</legend>
                    <label>Label name</label>
                    <input type="text" placeholder="Type something…"/>
                    <span class="help-block">Example block-level help text here.</span>
                    <label class="checkbox">
                      <input type="checkbox" /> Check me out
                    </label>
                    <button type="submit" class="btn">Submit</button>
                </fieldset>
            </div>
        </div>


    </div>
  </form>
  </div>
 </div>
</div>
 <!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
4

1 回答 1

0

我想我找到了问题所在。引导响应样式表应该在默认引导样式之后出现（并且有意义）。所以放这个：

    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

在这之后：

   <link href="../assets/css/bootstrap.css" rel="stylesheet">

对不起，初学者的错误。

于 2013-05-22T23:42:07.783 回答