Question

我有一个包含10个项目的导航菜单，我正在尝试使用bootstrap很好地显示它们，但我似乎无法使它工作。这是我的项目：

$menu_items = array(
    'Home' => '#',
    'About Us' => '#',
    'Events' => '#'),
    'Tickets' => '#',
    'Hospitality' => '#',
    'News' => '#',
    'Gallery' => '#',
    'Promotions' => '#',
    'Sale' => '#',
    'Contact Us' => '#');

以下是我现在如何展示它们：

<div class="container">
    <ul class="row">
        <?php foreach ($menu_items as $menu_item => $menu_link ) {
            if ( $menu_item == "Home" ) {
                echo"<li class='col-lg-offset-1 col-lg-1'> <a href='$menu_link'> $menu_item </a> </li>";
            }
            else {
                echo"<li class='col-lg-1'> <a href='$menu_link'> $menu_item </a> </li>";
            }
        } ?>
    </ul>
</div>

但事情是..我想最大化容器的整个宽度，所以我不能真正使用偏移量。想法，任何人？

Answer 1

根据我的comment

<div class="container-fluid">
<!-- <div class="container"> -->
    <ul class="row">
        <?php foreach ($menu_items as $menu_item => $menu_link ) {
            if ( $menu_item == "Home" ) {
                echo"<li class='col-lg-offset-1 col-lg-1'> <a href='$menu_link'> $menu_item </a> </li>";
            }
            else {
                echo"<li class='col-lg-1'> <a href='$menu_link'> $menu_item </a> </li>";
            }
        } ?>
    </ul>
</div>

通过将最外面的.container更改为.container-fluid，将任何固定宽度的网格布局转换为全宽布局。

如果您想在container vs container-fluid上添加更多笔记，请查看here

10列使用bootstrap，没有偏移

1 个答案: