Question

我使用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>

screen shot

Answer 1

您在侧栏中有嵌套行。试试这个部分

<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

处的流体嵌套部分祝你好运！

引导布局 - 部署多个跨度时的左边距问题

1 个答案: