Question

请原谅这个关于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>

Answer 1

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

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

此后：

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

抱歉，初学者错误。

Bootstrap简单布局没有响应

1 个答案: