Question

我试图在网上看一些东西，但这对我没有用。我该如何固定标题呢？

我标头的HTML在下面

<div id="navbar">
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="navbar-inner">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a ui-sref="about">Home</a></li>
                    <li><a ui-sref="route1">Home</a></li>
                    <li><a ui-sref="route2">Blog</a></li>
                    <li><a href="#">Referrals</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

我的标题的CSS在下面

/* Navbar Styles */
#navbar {
    clear: both;
    border-radius: 0;
    border: 0;
    margin: 0;
    background: #f9f9f9;
    height: auto;
}
#navbar li a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    font-family:Cambria;
    color: #575757;
    padding-top: 20px;
    padding-bottom: 20px;
}
#navbar li a:hover {
    color: #7bcfdc
}

.dropdown-menu {
    box-shadow: none;
    border-radius: 0;
    border: 0;
    width: 240px;
    padding: 0;
}
.dropdown-submenu {
    position:relative;
    border-radius: 0;
    padding: 0;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-1px;
    margin-left:-1px;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
}

#navbar .navbar-nav li a i {
    margin-left: 5px;
}
#navbar .navbar-nav li li a{
    background: #eee;
    text-transform: none;
    padding-top: 11px;
    padding-bottom: 11px;
}
#navbar .navbar-nav li li {
    position: relative;
}
#navbar .navbar-nav li li i {
    position: absolute;
    right: 20px;
    top: 14px;
}
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a {
    background: #e5e5e5;
}
#navbar .navbar-nav li li a:hover,
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a:hover
{
    background: #ff4e4f;
    color: #FFF;
}




/*----- RESPONSIVE STYLES ------*/
@media screen and (max-width: 1199px) {
    .dropdown-submenu:hover .dropdown-menu {
      display: block;
    }
}
@media screen and (max-width: 768px) {
    .header-top p {
        text-align: center;
    }
    .header-top a {
        margin: 10px auto 0 auto;
        clear: both;
        display: block;
    }
}
@media screen and (min-width: 1200px) {
    #navbar .dropdown:hover > .dropdown-menu {
        display: block;
    }
    .dropdown-submenu:hover>.dropdown-menu {
        display:block;
    }
}

我正在使用angularjs，引导程序。我将此标头放置在指令中，并在Index.html上调用该指令。请建议我如何使标题即使在滚动时也可见

Answer 1

您需要将navbar-fixed-top类添加到导航中，并删除navbar-static-top

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

让我知道是否有帮助！

如果要将宽度限制为400px，则可以执行以下操作

.navbar-fixed-top{
  max-width: 400px;
}

如何在滚动时固定我的boostrap标头

1 个答案: