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

Question

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

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

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

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

JSFiddle Demo

(缩小 View 以显示折叠栏，当您打开它时，您会看到折叠 View 中的所有内容都是杂乱无章的，并且彼此重叠)

这是导航条代码

<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

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

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