twitter-bootstrap Bootstrap Navbar overtop Carousel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21174344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Navbar overtop Carousel
提问by Caleb Addington
Having a slight problem with the positioning of my navbar. I have my navbar the way I would like (detached from the top slightly like in this example: http://getbootstrap.com/examples/carousel/) but the pictures in my carousel end below the navbar.
我的导航栏的定位有点问题。我有我想要的导航栏（有点像在这个例子中从顶部分离：http: //getbootstrap.com/examples/carousel/）但我的旋转木马中的图片在导航栏下方结束。
I would like for the pictures in my carousel to extend all the way to the top of the page and have the navbar overlapping the upper portion of the carousel (like in the example above). I've played around with the padding but the highest I can get the carousel images to extend to are the bottom of the navbar. I've attached the code snippets for the navbar, carousel and carousel css below. Any help would be appreciate, thanks in advance
我希望轮播中的图片一直延伸到页面顶部，并使导航栏与轮播的上部重叠（如上例所示）。我已经使用了填充，但我可以让轮播图像扩展到的最高位置是导航栏的底部。我在下面附上了导航栏、轮播和轮播 css 的代码片段。任何帮助将不胜感激，提前致谢
Code for Navbar:
导航栏代码：
<div class="container">
<div class="navbar navbar-inverse" role="navigation"> <!navbar-inverse is black, navbar-default is grey>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Derby Days 2014</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Donate</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Events <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Penny Wars</a></li>
<li><a href="#">Wonderful Wednesday</a></li>
<li><a href="#">Lip Sync</a></li>
<li><a href="#">Concert</a></li>
</ul>
</li>
<li><a href="#">FAQ</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Code for Carousel:
轮播代码：
CSS code for carousel:
轮播的 CSS 代码：
.carousel {position: relative;}
.carousel-inner {position: relative; width: 100%; overflow: hidden;}
回答by Jamie Collingwood
I believe this is what you are trying to achieve?
我相信这就是你想要达到的目标？
.bannerContainer {
position:relative;
}
.carousel {
position:absolute;
top:0;
}
.navbar {
position:absolute;
top:30px;
z-index:10;
background:#fff;
width:100%;
}
You want to wrap absolute positioned divs (nav and carousel) into a div that is relative.
您想将绝对定位的 div（导航和轮播）包装到一个相对的 div 中。
回答by Nikhil Raj A
You can overright the existing bootstrap css with this,you can use position:fixedor position:absolute
你可以用这个覆盖现有的引导 css，你可以使用position:fixed或position:absolute
.navbar{
position:absolute;
width:100%;
z-index:10;
max-width:100%;
}
回答by Some Guy
//To get navbar to sit on top of the carousel.
//让导航栏位于旋转木马的顶部。
.navbar {
position:absolute
}//To center the image and add a bit of padding above it to compensate for the navbar.
//使图像居中并在其上方添加一些填充以补偿导航栏。
.carousel-inner > .item > img {
margin: 0 auto;
padding-top: 50px;
}Worked for me at the very least, so here's hoping it helps you (and others). Cheers.
至少对我来说有效过，所以希望它可以帮助您（和其他人）。干杯。
回答by denoise
On the linked example they used a wrapper outside the nav .navbar-wrapper with an absolute placement and a top margin of 20px (when the viewport width is larger than 768px).
在链接的示例中，他们在导航 .navbar-wrapper 之外使用了一个包装器，具有绝对位置和 20 像素的顶部边距（当视口宽度大于 768 像素时）。
Here is the code they used to make it work:
这是他们用来使其工作的代码：
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
.navbar-wrapper .container {
padding-left: 0;
padding-right: 0;
}
.navbar-wrapper .navbar {
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.navbar-wrapper {
margin-top: 20px;
}
}
回答by Eljeddi Oussema
here is what worked for me:
这对我有用：
- Put the carousel into a section and make it absolute
Make the navbar absolute too
<section id="home"> <div id="carouselExampleIndicators" class="carousel slide" data- ride="carousel">.... </section> //the navbar <nav class="navbar navbar-expand-lg navbar-dark fixed-top mynav" >... </nav>
- 将旋转木马放入一个部分并使其成为绝对
使导航栏也绝对
<section id="home"> <div id="carouselExampleIndicators" class="carousel slide" data- ride="carousel">.... </section> //the navbar <nav class="navbar navbar-expand-lg navbar-dark fixed-top mynav" >... </nav>
////////CSS
////////CSS
.mynav{
position: absolute;
}
.home{
position: absolute;
}
