Bootstrap网格列一分为二，列二相邻。

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>`

- cao

---

我认为你应该使用col-xs-6而不是span6类。 - Aleksandar Miladinovic

Answer 1

这将会对你有所帮助。 链接

我添加了background-color以便你能看到divs。

- jofftiquez

---

谢谢Green Fox，这回答了这个问题。 - cao

这不是一个完整的解决方案，但它展示了一种足以完成我的任务的方法 => +1 :-). - Honza P.

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>

- Mohammed Abrar Ahmed