Question

">"        col1             col2      
">"   |--------------|---------------|
">"   |   text1      |               | 
">"   |--------------|  navigation   | 
">"   |    text2     |               |
">"   |--------------|---------------|

我需要像上图一样创建网格来保存文本和导航菜单。到目前为止，我尝试使用行和跨度的不同变化。这个想法是col1分为两个，col2应该在它旁边。左边的列分为两列，右边的列相同，但与第一列相邻。

    `<div class="row">  
            <div class="span6"> 
                <div class="row">
                    <div class="col-sm-6" style="background-color:blue;">AAAA</div>
               </div>       
              <div class="row">
                   <div class="col-sm-6" style="background-color:red;">BBBB</div>
              </div>    
            </div>  

            <div class="span6">

              <div class="row">
                   <div class="col-sm-12" style="background-color:yellow;">row2</div>
              </div>

            </div>  
        </div>`

Answer 1

这会对你有所帮助。 LINK

我添加了background-color，因此您可以看到divs。

Answer 2

这应该有帮助

<div class="col-md-12">
<div class="col-md-6">
  <div class="row-fluid">
    <div class="span2">Text 1</div>
    <div class="span2">Text 2</div>
 </div>
</div>
<div class="col-md-6">
   Navigation
</div>
</div>

Bootstrap网格列一分为两行，第二列与之相邻

2 个答案: