我最近开始使用 Twitter Bootstrap，发现它相当直观，除了一件事。
我目前正在构建一个网站，其中包含一个包含图像的包装器（类.sliderwrap），最终将替换为图像滑块。图像/滑块覆盖了绝对定位的 h1 文本。
在较小的屏幕宽度上，我的导航菜单会变成下拉菜单。当下拉菜单打开时，它会在.sliderwrap 内下推图像，但会与.sliderwrap 本身和绝对定位的文本重叠，而不是将其下推。这显然会破坏 h1 文本，我想将其与图像一起向下移动。
如何使下拉列表将.sliderwrap 自身向下推送而不是重叠其中的一些？
Here's the page I'm having the issue with.（请原谅下拉菜单本身的样式，它远未完成！）
【问题讨论】：
标签： javascript html css twitter-bootstrap
我认为最简单的解决方案是您需要清除主菜单和辅助菜单中的浮动。
如您所见：
<div class="navbar navbar-static-top">...</div>
你还有：
<div class="secondmenu">...</div>
清除这些最简单的方法是将它们放在.row 类或.row-fluid 中。我还建议您养成在代码中添加行的习惯，以便清楚这些事情。
您的代码最终应如下所示：
<div class="row">
<div class="navbar navbar-static-top">...</div>
<div class="secondmenu">...</div>
</div>
最后但并非最不重要...您的文本并非绝对相对于滑块 div 定位，而是相对于浏览器 chrome，因此您需要使滑块容器具有 position: relative 以便将任何元素设置为 @987654327该容器内的@（在这种情况下是您的h1）将根据其父容器绝对定位。
所以也要在你的样式中设置这个：
.sliderwrap {
position: relative;
}
这几乎修复了您的双菜单，因此它清除了滑块和文本。让我知道这是否适合您，如果您需要对答案进行任何澄清，请不要忘记投票或接受答案（如果它有效）！干杯。
【讨论】：
试试这个
正文
<body class="blackley">
<!--content goes here-->
<!-- Navigation -->
<div style="position: relative;">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</a><a class="brand" href="#">
<img src="img/logo.png" class="logo" />Blackley Golf Club</a>
<div class="firstmenu">
<div class="nav-collapse">
<ul class="nav">
<li><a href="#">Tee Bookings</a></li>
<li><a href="#">Societies</a></li>
<li><a href="#">Open Comps</a></li>
<li><a href="#">Functions</a></li>
</ul>
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search here...">
</form>
</div>
</div>
</div>
</div>
</div>
<!-- End Navigation -->
<!--begin second navigation -->
<!--image slider -->
<div class="sliderwrap">
<div class="secondmenu">
<div class="">
<ul class="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Course</a></li>
<li><a href="#">Pro Shop</a></li>
<li><a href="#">Membership</a></li>
<li><a href="#">Sections</a></li>
<li><a href="#">History</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
</div>
<div class="friendlyclub container">
<h1>
Welcome to Blackley Golf Club
<br />
"The Friendly Club"</h1>
</div>
<img src="img/sliderphoto.png" alt="slider photo 1" />
</div>
</div>
<div class="weather">
</div>
<!--Main content -->
<div class="info">
<div class="container">
<div class="row">
<div class="span4">
<div class="imgborder">
<img src="img/lake.png" />
</div>
</div>
<div class="span8">
<h2>
About Blackley Golf Club</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus tellus,
placerat vitae faucibus ut, luctus sit amet est. Proin mollis velit nec leo mollis
fringilla. Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales
a auctor eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim
tristique non. Vivamus elementum est non urna mollis malesuada.</p>
<p>
Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales a auctor
eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim tristique
non. Vivamus elementum est non urna mollis malesuada.</p>
</div>
</div>
</div>
</div>
<!-- End row -->
<div class="main-content container">
<div class="row top-space">
<div class="span4 news">
<img src="img/newsphoto.png" alt="news photo" />
<p>
June 27, 2013</p>
<h2>
Experience this summer with a bit of a bite...</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus tellus,
placerat vitae faucibus ut, luctus sit amet est. Proin mollis velit nec leo mollis
fringilla. Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales
a auctor eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim
tristique non</p>
<p class="readmore pull-right">
+ Read More</p>
</div>
<div class="span4 news">
<img src="img/newsphoto.png" alt="news photo" />
<p>
June 27, 2013</p>
<h2>
Experience this summer with a bit of a bite...</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus tellus,
placerat vitae faucibus ut, luctus sit amet est. Proin mollis velit nec leo mollis
fringilla. Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales
a auctor eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim
tristique non</p>
<p class="readmore pull-right">
+ Read More</p>
</div>
<div class="span4 news">
<img src="img/newsphoto.png" alt="news photo" />
<p>
June 27, 2013</p>
<h2>
Putt a bit of drive into your summer</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus tellus,
placerat vitae faucibus ut, luctus sit amet est. Proin mollis velit nec leo mollis
fringilla. Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales
a auctor eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim
tristique non</p>
<p class="readmore pull-right">
+ Read More</p>
</div>
</div>
<!-- End row -->
<div class="row">
<div class="span12">
<ul class="footernav">
<li><a href="#">Home</a></li>
<li><a href="#">Course</a></li>
<li><a href="#">Pro Shop</a></li>
<li><a href="#">Membership</a></li>
<li><a href="#">Sections</a></li>
<li><a href="#">History</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Members Login</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div>
<!-- End row -->
</div>
</div>
<!-- End container -->
<!--End main content -->
<div id="push">
</div>
</div>
<div class="navbar-inverse">
<div class="navbar-inner">
<div class="container">
<div class="pull-left">
<p class="footertext">
© 2003-2013 by Blackley Golf Course. All rights reserved.</p>
</div>
<div class="pull-right">
<p class="footertext">
Powered by Intelligolf</p>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--Typekit call -->
</body>
覆盖css
/* CUSTOM STYLING */
/* apply a natural box layout model to all elements */
*, *:before, *:after
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body
{
font-family: 'source-sans-pro' , sans-serif;
font-weight: 400;
background: #f6f7f0;
}
h2
{
color: #0099ea;
font-size: 18px;
line-height: 20px;
font-weight: 400;
}
/* NAVIGATION */
.navbar .brand
{
color: #0099ea;
line-height: 60px;
}
.navbar .brand .logo
{
width: 70px;
}
.nav-collapse
{
background-color: #fff;
z-index: 1000;
width: 100%;
}
.navbar-inner
{
height: 80px;
background: #ffffff;
}
.navbar-search
{
line-height: 70px;
}
.navbar-search .search-query
{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.nav li
{
line-height: 60px;
}
.firstmenu
{
float: right;
}
/* SECOND NAV MENU */
.secondmenu
{
box-model: content-box;
position: absolute;
left: 3%;
top: 20%;
float: left;
}
.secondmenu .menu li
{
list-style: none;
text-align: right;
font-size: 18px;
background-color: #424242;
border-bottom: 5px #fff solid;
display: inline-block;
float: right;
clear: right;
margin-bottom: 7px;
}
.secondmenu .menu li.active
{
background-color: #0099ea;
}
.secondmenu .menu li a
{
display: block;
color: #fff;
height: 20px;
margin-top: 10px;
padding: 10px 15px 15px 40px;
line-height: 5px;
}
/* SLIDER */
.friendlyclub
{
position: absolute;
right: 160px;
top: 100px;
float: right;
}
.friendlyclub h1
{
color: #fff;
text-align: right;
line-height: 50px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}
.sliderwrap
{
float: left;
position: relative;
width: 100%;
}
.sliderwrap img
{
margin-bottom: 0;
min-width: 100%;
max-height: 600px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.info
{
padding-top: 20px;
padding-bottom: 20px;
background-color: #fff;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}
.imgborder
{
background: #f6f7f0;
}
.imgborder img
{
padding: 7px;
}
.top-space
{
margin-top: 50px;
margin-bottom: 50px;
}
/* row of span4s, news */
.span4.news
{
position: relative;
padding: 30px 30px 20px 30px;
min-height: 444px;
background: #ffffff;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}
.span4.news h2
{
margin-bottom: 15px;
}
.span4.news h3
{
color: #999999;
font-size: 18px;
font-weight: 400;
}
.span4.news img
{
margin: 0 0 20px 0;
width: 100%;
}
.span4.news p.readmore
{
position: absolute;
text-transform: uppercase;
bottom: 10px;
right: 30px;
}
.imgborder
{
padding: 10px;
}
.full-width
{
width: 100%;
}
/* NAV ABOVE FOOTER */
.footernav
{
margin-bottom: 10px;
margin-left: 0;
}
.footernav li
{
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
}
.footernav li:after
{
content: ' /';
}
.footernav li:last-child:after
{
content: ' ';
}
.footernav li a
{
color: #424242;
}
/* FOOTER */
.push
{
height: 40px;
}
.navbar-inverse
{
margin-bottom: -40px;
}
.navbar-inverse .navbar-inner
{
height: 40px;
margin-top: 20px;
}
.navbar-inverse .navbar-inner .footertext
{
color: #ffffff;
line-height: 40px;
}
/* RESPONSIVE */
@media screen and (max-width: 980px)
{
.firstmenu
{
clear: both;
margin-right: -20px;
display: block;
position: relative;
}
.firstmenu
{
width: 50%;
padding: 0;
}
.secondmenu
{
box-model: content-box;
position: absolute;
left: 3%;
top: 20%;
float: left;
}
.secondmenu li
{
text-align: left;
float: left;
}
.secondmenu li a
{
text-align: left;
float: left;
}
.secondmenu .menu li
{
list-style: none;
text-align: right;
font-size: 14px;
border-bottom: 5px #fff solid;
display: inline-block;
float: left;
clear: left;
margin-bottom: 7px;
}
.secondmenu .menu li a
{
display: block;
color: #777;
height: 20px;
margin-top: 10px;
padding: 10px 15px 15px 40px;
line-height: 5px;
}
.secondmenu .menu li + li a
{
margin-bottom: 2px;
}
.secondmenu .menu > li > a:hover, .secondmenu .menu > li > a:focus, .secondmenu .menu a:hover, .secondmenu .menu a:focus
{
background-color: #f2f2f2;
text-decoration: none;
}
.secondmenu .menu > li > a, .secondmenu .menu a
{
padding: 9px 15px;
display: block;
width: 100%;
font-weight: bold;
color: #777777;
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
【讨论】：