1

CSS レイアウトには Bootstrap を使用しています。

次の html コードがmargin-leftサイド要素に対して異なるものを生成するのはなぜですか? スクリーンショットのように。

助けてくれてありがとう。

<body>
<div class="container-fluid pink">  <!--container-->

  <div class="row-fluid">
     <div class="span12 grey">  <!--header-->
       header<br/><br/><br/><br/>
     </div>

  <div class="row-fluid"> <!--navs-->
       <div class="span2 green">nav 1</div>
       <div class="span2 yellow">nav 2</div>
       <div class="span2 yellow">nav 3</div>
       <div class="span2 green">nav 4</div>
       <div class="span2 yellow">nav 5</div>
       <div class="span2 green">nav 6</div>
  </div>

  <div class="row-fluid">  

         <div class="span3 yellow">  <!--sidebar-->
            <div class="span12 cyan">side 1</div>
            <div class="span12 blue">side 2</div>
            <div class="span12 cyan">side 3</div>
         </div>  

         <div class="span9 blue"> <!--Body-->
              body<br/><br/><br/><br/><br/>
         </div>
     </div> 

   <div class="row-fluid">   <!--footer-->
           <div class="span4 green">foot 1</div>
           <div class="span4 grey">foot 2</div>
           <div class="span4 green">foot3</div>
   </div>

  </div>
</div>
</body>

スクリーンショット

4

1 に答える 1

2

サイドバーにネストされた行があります。そのセクションでこれを試してください

<div class="row-fluid">  

     <div class="span3 yellow">  <!--sidebar-->
        <div class="row-fluid"> <!-- start nested rows -->
        <div class="span12 cyan">side 1</div>
          </div>
          <div class="row-fluid">
        <div class="span12 blue">side 2</div>
            </div>
            <div class="row-fluid">
        <div class="span12 cyan">side 3</div>
        </div> <!-- end nested rows -->
     </div> 
 </div>

詳細については、http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystemで流体のネストされたセクションを参照してください。

幸運を！

于 2013-05-31T21:34:25.247 に答える