如何在 bootstrap 中为移动屏幕（小于 600px）设置导航栏宽度？

Question

在图像中（下面给出）导航栏没有占满width.I希望它在小屏幕（<600px）中占满宽度。给出了相关代码和屏幕截图below.I尝试了很多方法但失败了。

HTML:

<header class="header-area">
            <nav class="header-nav navbar">
                <div class="container-fluid">
                    <ul class="nav navbar-nav text-center text-uppercase">
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Work</a></li>
                        <li>
                            <a href="#">
                                <img src="images/logo1.png" class="img-responsive" alt="website-logo" style="width: 80px;height:auto;"/>
                            </a>
                        </li>
                        <li><a href="#">Shop</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </header>

CSS:

header-area {
    background: url("images/background1.jpg") no-repeat 0 0 / 100% 100%;
    color: #84828D;
    padding-bottom: 474px;
}
.header-nav .nav, .header-nav .nav.navbar-nav {
    width: 100%;
    float: inherit;
}
.header-nav.navbar .nav, .navbar .nav > li {
    float: inherit;
    display: inline-block;
    vertical-align: middle;
}

媒体查询：

@media all and (max-width: 600px) {
    .navbar .nav > li {
        display: block;
    }
    .navbar .nav > li  img {
        margin: auto;
    }
}

Answer 1

我们可以像这样向您的媒体查询添加一些行

@media all and (max-width: 600px) {
    .container-fluid {
        padding:0; /* Extend your menu really full width without padding of container-fluid */
    }
    .navbar-nav {
        margin:0; /* Center your menu with current 100% width available */
    }
    .navbar .nav > li {
        display: block;
    }
    .navbar .nav > li  img {
        margin: auto;
    }
}

希望对您有所帮助！

Answer 2

bootstrap.css 中 CSS 之后的原因导致菜单将 -15px 推入

.navbar-nav {
    margin: 7.5px -15px;
}

使用 0px 在您的媒体查询中添加以下 CSS，以便菜单扩展到容器的整个宽度

.navbar-nav {
    margin: 7.5px 0px;
}

到

@media all and (max-width: 600px) {
    .navbar-nav {
        margin: 7.5px 0px;
    }   
    .navbar .nav > li {
        display: block;
    }
    .navbar .nav > li  img {
        margin: auto;
    }
}

Fiddle

如何在 bootstrap 中为移动屏幕（小于 600px）设置导航栏宽度？

How can set navbar width full for mobile-screen(less than 600px) in bootstrap?

html

css

media-queries

twitter-bootstrap