引导不换行的列正确

Question

我正在重建老SVG基于半圆菜单与引导，我想有这样的布局：

... [3 + 3 + 3 + 3] ....
[12] [.. 6 + 6 ..] [12]
[12] [3 + 6 + 3] [12]

我有一个上部中段部分与6列宽和4个相同的内部项目，下来我有一个3列宽左侧和右侧的部分与6列之间的中间部分。我的问题是左右中间部分不包裹在中上部分之下。 Bootstrap只是将它们挤压成一个单独的行......它是否应该将超过12列的项目放在它下面？

在部件内部，子部件完美包裹或当我注释掉左中右部分时，上中部完美定位。

<div class="container"> 
    <div class="row"> 
     <div class="semicircle-menu col-sm-12 hidden-xs"> 
      <div class="upper-mid col-sm-6 center-block"> 
       <div class="menu-item manage-dashboards col-sm-3">Manage Dashboards</div> 
       <div class="menu-item add-new-dashboard col-sm-3">Add New Dashboard</div> 
       <div class="menu-item manage-alerts col-sm-3">Manage Alerts</div> 
       <div class="menu-item add-new-alert col-sm-3">Add New Alert</div> 
      </div> 
      <div class="left col-sm-3"> 
       <div class="menu-item-sub add-new-dataset col-sm-12">Add New Dataset</div> 
       <div class="menu-item-sub manage-datasets col-sm-12">Manage Datasets</div> 
       <div class="menu-item-sub data-sources col-sm-12">Data Sources</div> 
      </div> 
      <div class="mid col-sm-6"> 
       <div class="menu-item dashboards col-sm-6">Dashboards</div> 
       <div class="menu-item alerts col-sm-6">Alerts</div> 
       <div class="menu-item master-data col-sm-3">Master Data</div> 
       <div class="indicator col-sm-6">DataIQ</div> 
       <div class="menu-item maintenance col-sm-3">Maintenance</div> 
      </div> 
      <div class="right col-sm-3"> 
       <div class="menu-item-sub users col-sm-12">Users</div> 
       <div class="menu-item-sub user-groups col-sm-12">User Groups</div> 
       <div class="menu-item-sub settings col-sm-12">Settings</div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

在这里您需要定义行时，如果您定义了col-sm-12，每行都包含12个网格。因此，要定义网格内的网格，您需要首先定义行并相应地分割这12个网格。在这里，我更新了你的代码，你忘了在网格中添加行。一排不能有18格。否则你必须定制你的引导网格。

<div class="container"> 
<div class="row"> 
    <div class="semicircle-menu col-sm-12 hidden-xs"> 
     <div class="row"> 
     <div class="upper-mid col-sm-6 center-block"> 
      <div class="menu-item manage-dashboards col-sm-3">Manage Dashboards</div> 
      <div class="menu-item add-new-dashboard col-sm-3">Add New Dashboard</div> 
      <div class="menu-item manage-alerts col-sm-3">Manage Alerts</div> 
      <div class="menu-item add-new-alert col-sm-3">Add New Alert</div> 
     </div> 
     <div class="left col-sm-3"> 
      <div class="menu-item-sub add-new-dataset col-sm-12">Add New Dataset</div> 
      <div class="menu-item-sub manage-datasets col-sm-12">Manage Datasets</div> 
      <div class="menu-item-sub data-sources col-sm-12">Data Sources</div> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="mid col-sm-6"> 
      <div class="menu-item dashboards col-sm-6">Dashboards</div> 
      <div class="menu-item alerts col-sm-6">Alerts</div> 
      <div class="menu-item master-data col-sm-3">Master Data</div> 
      <div class="indicator col-sm-6">DataIQ</div> 
      <div class="menu-item maintenance col-sm-3">Maintenance</div> 
     </div> 
     <div class="right col-sm-3"> 
      <div class="menu-item-sub users col-sm-12">Users</div> 
      <div class="menu-item-sub user-groups col-sm-12">User Groups</div> 
      <div class="menu-item-sub settings col-sm-12">Settings</div> 
     </div> 

     </div> 
    </div> 
</div> 

Answer 2

你的意思是这样吗？

<div class="container"> 
    <div class="row"> 
     <div class="semicircle-menu col-sm-12 hidden-xs text-center"> 
      <div class="row upper-mid"> 
       <div class="col-sm-3">Manage Dashboards</div> 
       <div class="col-sm-3">Add New Dashboard</div> 
       <div class="col-sm-3">Manage Alerts</div> 
       <div class="col-sm-3">Add New Alert</div> 
      </div> 
      <div class="row"> 
       <div class="col-sm-3 left"> 
        <div class="row"> 
         <div class="col-sm-12">Add New Dataset</div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-12">Manage Dataset</div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-12">Data Sources</div> 
        </div> 
       </div> 
       <div class="col-sm-6 mid"> 
        <div class="row"> 
         <div class="col-sm-12">Dashboards</div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-12">Alerts</div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-12">Master Data</div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-12">DataIQ</div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-12">Maintenance</div> 
        </div> 
       </div> 
       <div class="col-sm-3 right"> 
        <div class="row"> 
         <div class="col-sm-12">Users</div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-12">User Groups</div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-12">Settings</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>