为 Bootstrap 折叠导航栏提供有组织的布局

Question

我目前有一个带有图像的引导导航栏，问题是当它折叠时，由于一些自定义边距和图像在我的文本上运行，它变得一团糟。

当我的导航栏折叠时，有什么方法可以指定新的样式或布局？我希望一切都像布局一样

ImageOfHome
Home (text)
ImageOfUsers
Users (text)
ect...

相反，这一切都相互影响。我还想在折叠状态下移除悬停效果。

JSFiddle Demo

（显示折叠栏的收缩视图，当您打开它时，您会看到所有内容都乱七八糟，并在折叠的视图中相互重叠）

这是导航栏代码

<div class="navbar navbar-inverse navbar-fixed-top" style="margin-top:25px">
    <div class="container" style="height:5px">
        <div class="navbar-header" style="margin-bottom:-80px; padding-bottom:-80px">
            <span class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </span>
            <a href="@Url.Action("Index", "LakerLegends")" style="margin-right:-30px" onclick="return false">
                <img src="/Content/img/LogoConstruction.png" alt="Logo" width="275" height="100" style="margin-top:-25px" />
            </a>
        </div>
        <div class="navbar-collapse collapse pull-right">

            <ul class="nav navbar-nav" style="text-align:center">
                <li class="rolloverNav">

                    <a href="@Url.Action("Index", "LakerLegends")" id="navbar">
                        <img src="~/Content/navbar/homeNew.png" class="urlImage"/>
                        <br />
                        Home
                    </a>
                </li>
                <li>

                    <a href="@Url.Action("Index", "Users")" id="navbar">
                        <img src="~/Content/navbar/usersNew.png" class="urlImage" />
                        <br />
                        Users
                    </a>
                </li>
                <li>

                    <a href="@Url.Action("Index", "Events")" id="navbar">
                        <img src="~/Content/navbar/eventsNew.png" class="urlImage" />
                        <br />
                        Events
                    </a>
                </li>
                <li>

                    <a href="@Url.Action("Index", "Competitive")" id="navbar">
                        <img src="~/Content/navbar/competitiveNew.png" class="urlImage"  />
                        <br />
                        Teams
                    </a>
                </li>
                <li>

                    <a href="@Url.Action("Index", "Streams")" id="navbar">
                        <img src="~/Content/navbar/streamsNew.png" class="urlImage" />
                        <br />
                        Streams
                    </a>
                </li>
                <li>

                    <a href="@Url.Action("Index", "Staff")" id="navbar">
                        <img src="~/Content/navbar/staff.png" class="urlImage"/>
                        <br />
                        Staff
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

这是我的 CSS

.rolloverNav {
    padding-bottom:0px;
}

a#navbar:hover {
    color:#f1fe51;
    margin-top:-10px;
    opacity: 1;
}


a#navbar {
    opacity:1;
    padding-top:0px;
    padding-bottom:0px;
    font-weight:bold;
    font-family: 'Fjalla One', sans-serif;
    font-size:14px
}

.urlImage {
    height:40px;
    width:40px;
    margin-top: -5px;
    padding-bottom: 0px;
}

一直在考虑使用 @media 等，但似乎没有任何影响 CSS。 ：/

Answer 1

您可以创建自己的 CSS 来覆盖 Bootstrap CSS，并使用 Bootstrap 也使用的媒体查询：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

针对普通 CSS 进行了修改：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @1200px) { ... }

取自： http://getbootstrap.com/css/#grid-media-queries

顺便说一句，您的 jsFiddle 对未加载的图像有点混乱。

Answer 2

这里有一些简单的改变让它看起来有点体面：

1) 为导航中的 <li> 元素添加一点边距。

.nav li {
    margin: 10px 0px;
}

2) 将鼠标悬停在媒体查询中，只允许它以 768 像素或更高的分辨率运行，因此当菜单折叠时不会应用。

@media (min-width: 768px) {
    a#navbar:hover {
        color:#f1fe51;
        margin-top:-10px;
        opacity: 1;
    }
}

Update JSFiddle

编辑：

您有一个内联样式，可以防止折叠的菜单掉到菜单按钮下方。

这个：

<div class="navbar-header" style="margin-bottom:-80px; padding-bottom:-80px">

需要这样：

<div class="navbar-header">

New JSFiddle