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

以下是一些简单的修改，让它看起来有点受人尊敬：

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

Answer 2

您可以创建自己的CSS来覆盖Bootstraps 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对于那些没有加载的图像非常混乱。顺便说一下。

将Bootstrap的折叠导航栏设置为有组织的布局

2 个答案: