html - 如何更改 Bootstrap 菜单宽度？

Question

如何在不影响响应能力的情况下更改 Bootstrap 菜单宽度？下面是我的 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;
}

随意调整。