Question

如何在不影响响应性的情况下更改引导菜单宽度？以下是我的HTML：

<div class="page-header col-xs-12">
        <h2>Heading</h2>
    </div>
    <div class="container col-xs-12">
        <div class="row navigation-row">
            <div class="col-xs-2"></div>
            <div class="col-xs-8">
                <nav class="navbar navbar-default" style="background:none;border:0px;">
                    <div class="container-fluid">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                                    <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Page 1-1</a></li>
                                    <li><a href="#">Page 1-2</a></li>
                                    <li><a href="#">Page 1-3</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Page 2</a></li>
                            <li><a href="#">Page 3</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
            <div class="col-xs-2"></div>
        </div>
</div>

以下是我的css：

@charset "utf-8";

    .page-header {
        background-color:#DDEFE6 !important;
        height:150px;
        margin:0px auto;
    }
    .navigation-row{
        background-color:#009547;
        padding:0px;
        height:50px;
    }

如何更改“主页”菜单的宽度？

Answer 1

您可以尝试增加导航栏元素之间的填充，以便它们显示得更远，因此，使用以下CSS显示宽度较大：

.navbar-nav > li {
    padding-left: 30px;
    padding-right: 30px;
}

根据需要调整。

Answer 2

正如詹姆斯提到的，如果你提供padding-left和padding-right，它应该可以正常工作，但如果你将这些填充提供给<a>内的<li>元素，它会更好而不仅仅是<li>。像这样。

.navbar-nav > li > a {
    padding-left: 30px;
    padding-right: 30px;
}

原因：这会影响菜单链接，即使是附加的任何动态类，例如active。

如何更改引导菜单宽度？

2 个答案: