[英]Navbar Alignment with bootstrap?
我有一個想要實現的基本布局。 我有一個.container類,其徽標漂浮在左側,然后我想將一個引導導航欄漂浮在右側以及容器的頂部,並且似乎在“ pull-right”類上正確浮動帶有引導程序的“ navbar-nav”類,但它位於品牌徽標的下方,我一生無法確定為什么或如何正確對齊。
無論如何,這是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;
}
我想念什么?
只是因為您已將col-sm-offset-4
類添加到userNav
元素。 刪除它,一切都會按預期工作。 當您保留col-sm-offset-4
類時,發生的事情是,它將element
視為總共需要12
網格。 由於已經通過brand - logo
將其移動了4個網格,並且框架無法在同一row
分配12
網格,因此將其移動到新row
。 因此,無需再次提供offset
。 只需更改元素的類,如下所示:
<div class ="userNav col-sm-8"> <!--remove col-sm-offset-4 from here-->
只是一個適合您的演示
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.