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 に答える