1

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

我对 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%;
}

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

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

4

2 回答 2

0

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

Navbar-inner 的左右内边距为 20px，如果将其设置为 0，则该栏将占据菜单的整个宽度。

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

你是这个意思吗？

于 2013-05-07T13:14:16.203 回答
0

您可以使用@media查询，以便您的 width:12.5% 仅适用于桌面模式..

CSS

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

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

于 2013-05-07T13:32:52.407 回答