导航栏与 bootstrap 对齐?
Navbar Alignment with bootstrap?
我有一个要实现的基本布局。我有一个 .container class,徽标向左浮动,然后我想要一个 bootstrap 导航栏向右浮动,也在容器的顶部,它似乎正确浮动"pull-right" class 在 "navbar-nav" class 和 bootstrap 上,但它位于品牌徽标下方,我无法弄清楚为什么或如何让它正确对齐。
无论如何,这是 html.....
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class= "container">
<header class = "headerWrap">
<div class = "row">
<div class ="brand"></div>
<div class = " userNav col-sm-8 col-sm-offset-4">
<nav class = "navbar navbar-default">
<ul class= "nav navbar-nav pull-right">
<li><a href= "#">Home</a></li>
<li><a href= "#">Contact Us</a></li>
<li><a href= "#">Sign In</a></li>
<li><a href= "#">Cart</a></li>
<li><a href= "#">Location + Directions</a></li>
<li><a href= "#">Who We Are</a></li>
<li><a href= "#">Alumni Network</a></li>
</ul>
</nav>
</div>
</div>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
这是 CSS:
$font-color: white;
body {
background-color: black;
}
.headerWrap {
width: 100%;
height: 250px;
}
.brand {
background-image:url(img/Screen%20Shot%202015-10-25%20at%2010.13.40%20PM.png);
background-size: 100%;
float: left;
background-repeat: no-repeat;
width: 250px;
height: 100px;
}
.userNav {
float: right;
}
.navbar-default {
background-color: transparent;
border: none;
}
.navbar-default .navbar-nav>li>a{
color: $font-color;
}
我错过了什么?
这只是因为您在 userNav
元素中添加了 col-sm-offset-4
class。删除它,一切都会按预期工作。当你保持 col-sm-offset-4
class 时,会发生什么,它认为 element
完全需要 12
网格。由于它已经被 brand - logo
移动了 4 个网格,并且框架无法在同一个 row
中分配 12
个网格,所以它将它移动到新的 row
。所以不用再给offset
了。只需更改元素的 class 如下:
<div class ="userNav col-sm-8"> <!--remove col-sm-offset-4 from here-->
给你一个DEMO
我有一个要实现的基本布局。我有一个 .container class,徽标向左浮动,然后我想要一个 bootstrap 导航栏向右浮动,也在容器的顶部,它似乎正确浮动"pull-right" class 在 "navbar-nav" class 和 bootstrap 上,但它位于品牌徽标下方,我无法弄清楚为什么或如何让它正确对齐。
无论如何,这是 html.....
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class= "container">
<header class = "headerWrap">
<div class = "row">
<div class ="brand"></div>
<div class = " userNav col-sm-8 col-sm-offset-4">
<nav class = "navbar navbar-default">
<ul class= "nav navbar-nav pull-right">
<li><a href= "#">Home</a></li>
<li><a href= "#">Contact Us</a></li>
<li><a href= "#">Sign In</a></li>
<li><a href= "#">Cart</a></li>
<li><a href= "#">Location + Directions</a></li>
<li><a href= "#">Who We Are</a></li>
<li><a href= "#">Alumni Network</a></li>
</ul>
</nav>
</div>
</div>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
这是 CSS:
$font-color: white;
body {
background-color: black;
}
.headerWrap {
width: 100%;
height: 250px;
}
.brand {
background-image:url(img/Screen%20Shot%202015-10-25%20at%2010.13.40%20PM.png);
background-size: 100%;
float: left;
background-repeat: no-repeat;
width: 250px;
height: 100px;
}
.userNav {
float: right;
}
.navbar-default {
background-color: transparent;
border: none;
}
.navbar-default .navbar-nav>li>a{
color: $font-color;
}
我错过了什么?
这只是因为您在 userNav
元素中添加了 col-sm-offset-4
class。删除它,一切都会按预期工作。当你保持 col-sm-offset-4
class 时,会发生什么,它认为 element
完全需要 12
网格。由于它已经被 brand - logo
移动了 4 个网格,并且框架无法在同一个 row
中分配 12
个网格,所以它将它移动到新的 row
。所以不用再给offset
了。只需更改元素的 class 如下:
<div class ="userNav col-sm-8"> <!--remove col-sm-offset-4 from here-->
给你一个DEMO