引导格的东西，如合并单元格

Question

如何创建这样的布局与Twitter的引导......

因此，它栈像这样...

我可以做一个表格布局（目前它是一个图像映射，但这是一个快速而肮脏的短期解决方案），但正如我了解bootstrap，表格不知道如何堆叠单元格。我已经看到许多Bootstrap演示给出了“rowspan”的功能，但在这种情况下，我需要一个“colspan”类似的功能。 Bootstrap能做到这一点吗？

Answer 1

假设你想使用Bootstrap 3.1.1这样的东西应该工作。您可能需要添加一些调整，但它应该可以解决您的问题。基本上你把你的副标题和你的内容块放在一个列中，以便在较小的屏幕上粘在一起。

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-2"> 
      3 
     </div> 
     <div class="col-xs-10"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        Research complete 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-sm-4"> 
        <div>Protocol and data</div> 
        <div> 
         <ul> 
          <li>...</li> 
          <li>...</li> 
          <li>...</li> 
         </ul> 
        </div> 
       </div> 
       <div class="col-sm-4"> 
        <div>Study specific</div> 
        <div> 
         <ul> 
          <li>...</li> 
          <li>...</li> 
          <li>...</li> 
         </ul> 
        </div> 
       </div> 
       <div class="col-sm-4"> 
        <div>Ethics/governance and regulatory</div> 
        <div> 
         <ul> 
          <li>...</li> 
          <li>...</li> 
          <li>...</li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

JSFiddle