Question

我正在使用引导程序导航栏。我将导航栏放在我的图像滑块中，如示例中所示。当我向下滚动导航消失时，我不想要这个。当我向下滚动时，我希望导航跟随我。所以我尝试添加position:fixed。当我添加位置固定时，整个菜单变得不同。我希望它能保持全宽。

https://jsfiddle.net/hqdg1w36/1/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resources/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">





<body>
    <header>

            <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span> 
                    </button>
                    <a class="navbar-brand" href="#">Beauty Salon Lisa</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li> 
                        <li><a href="#">Page 3</a></li> 
                    </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>
                </div>
            </div>
            </nav>

        <div id="myCarousel" class="carousel slide" data-ride="carousel">

            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
             </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">

                <div class="item active">
                    <img src="https://cdn.spafinder.com/2016/01/spa-treatments-to-try.jpg" alt="Chania">
                </div>

                <div class="item">
                    <img src="https://cdn.spafinder.com/2016/01/spa-treatments-to-try.jpg" alt="Chania">
                </div>

                <div class="item">
                <img src="https://cdn.spafinder.com/2016/01/spa-treatments-to-try.jpg" alt="Chania">
                </div>

                <div class="item">
                    <img src="https://cdn.spafinder.com/2016/01/spa-treatments-to-try.jpg" alt="Chania">
                </div>

        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>

        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>


        </div>
    </header>
    </body>

</html>


header {
}

.carousel {
    position: absolute;
    top: 0;
}

a.navbar-brand {
    font-family: 'Pacifico', cursive;
}

nav.navbar.navbar-inverse {
    border-radius:0;
    background-color:rgba(0, 0, 0, 0.5); 
    border:none;
    margin-bottom:0;
    z-index:100;
    top:0;


}


nav.navbar.navbar-inverse a {
    color:#E897DB;
}

nav.navbar.navbar-inverse a:hover {
    color:#F7BDFF;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {

    color:#F7BDFF;
    background:none;
}

Answer 1

https://jsfiddle.net/hqdg1w36/2/检查这个小提琴

<nav class="navbar navbar-inverse navbar-fixed-top">

</nav>

Answer 2

在navbar-fixed-top代码中添加navbar，如下所示，这会将navbar的位置固定在最上方。

<nav class="navbar navbar-inverse navbar-fixed-top">

使用css添加以下代码添加

nav.navbar.navbar-inverse {
    border-radius:0;
    background-color:rgba(0, 0, 0, 0.5); 
    border:none;
    margin-bottom:0;
    z-index:100;
    top:0;
    position:fixed;
    width:100%;
}

两者都很好。但是如果要添加此css更改，请不要在html代码中包含navbar-fixed-top。

Answer 3

这是解决方案!!!!!只需添加position:fixed和width:100%

即可

nav.navbar.navbar-inverse {
    border-radius:0;
    background-color:rgba(0, 0, 0, 0.5); 
    border:none;
    margin-bottom:0;
    z-index:100;
    top:0;
    position: fixed;
    width:100%;
}

bootstrap导航和固定位置不起作用

3 个答案: