Question

使用Bootstrap，对于左侧和右侧边栏3列布局，我们不知道如何编辑css以将主要内容放在两个侧边栏上方，请告知如何操作，谢谢。

我们尝试了以下代码，但不能正常工作：

<div class="row">
  <div class="span6">
    main content
  </div>
  <div class="span3 pull-left">
    left bar
  </div>
  <div class="span3 pull-right">
    right bar
  </div>
</div>

请告知如何做，谢谢。

Answer 1

编辑下面的解决方案是指使用Bootstrap 2的原始问题

部分解决方案是在主要内容上使用pull-right，尽管单独执行此操作会将主要内容浮动到窗口的最右侧。

完整的解决方案是使用嵌套网格作为主要内容和左栏，以便包含右拉。

现场直播：http://jsfiddle.net/panchroma/mU2zu/

HTML

<div class="container">

<div class="row">

       <div class="span9">
           <div class="row">
         <div class="span6 pull-right">main content</div>

          <div class="span3">left bar</div>
           </div><!-- end nested row -->
    </div><!-- end span9 -->

        <div class="span3">right bar</div>

    </div><!-- end parent row-->

 </div><!-- end container -->

祝你好运！

bootstrap 3列布局，两个侧边栏前的主要内容

1 个答案: