我已经在我的网站上实现了 Twitter Bootstrap 。我想知道如何使导航栏像 twitter bootstrap official site 上的一样响应。 . 小尺寸屏幕对齐有问题,请看下图。
HTML 代码:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<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" href="index.php">Studyfoyer</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="learn.php">Learn</a></li>
<li><a href="teach.php">Teach</a></li>
<li><a href="forum.php">Discuss</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Connect<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="contact.php">Contact Us</a></li>
<li class="divider"></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contribute</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
自定义 CSS:
.nav{
float:right;
}
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
padding-left: 0;
padding-right: 0;
}
.navbar-wrapper .navbar {
padding-left: 15px;
padding-right: 15px;
}
仅供引用玩尺寸 my_Site
最佳答案
@media 查询就是您要找的。你可以找到很多例子,一个是here
关于javascript - 导航栏在小屏幕上失去对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20586380/