Question

我正在使用Bootstrap进行重建和旧的基于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>

Bootstrap没有正确包装列

2 个答案: