1

我将 Bootstrap 用于我的 css 布局。

为什么下面的 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 回答