Question

在我的响应式bootstrap导航栏中遇到我想要的样式时遇到了一些麻烦。

我是bootstrap / css的新手，jsfiddle http://jsfiddle.net/YfmwV/是我到目前为止一直在攻击的。

<div class="navbar">
    <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

        <div class="nav-collapse">
            <ul class="nav">
                <li class="active"><a href="#">Home</a>

                </li>
                <li><a href="#">Showtime</a>

                </li>
                <li><a href="#">Motivation</a>

                </li>
                <li><a href="#">About</a>

                </li>
                <li><a href="#">Testimonials</a>

                </li>
                <li><a href="#">Gallery</a>

                </li>
                <li><a href="#">Merchandise</a>

                </li>
                <li><a href="#">Contact</a>

                </li>
            </ul>
        </div>
    </div>
</div>

问题与以下代码有关，它在大屏幕视图中实现了我的目的，但在响应模式下完全破坏了菜单。

.navbar .nav>li {
    width: 12.5%;
}

我试图让导航栏项占据导航栏的整个空间而不是向左或向右对齐，我能想到的唯一方法是将宽度设置为百分比，这是不理想。

如果有人能指出我正确的方向，那就太棒了。

Answer 1

我并不完全明白你的意思，但据我所知，你希望悬停和主动效果在两边都没有任何填充/边距。

Navbar-inner左侧和右侧的填充为20px，如果将其设置为0，则条形图将占据菜单的整个宽度。

.navbar-inner {
padding-right: 0;
padding-left: 0;
}

这是你的意思吗？

Answer 2

您可以使用 @media 查询，以便宽度：12.5％仅适用于桌面模式..

<强> CSS

@media (min-width: 979px) {
    .navbar .nav>li {
        width: 12.5%;
    }
}

演示：https://www.bootply.com/wauacskYQj

Bootstrap居中响应垂直导航栏

2 个答案: