Navbar與自舉對齊？

我有一個基本的佈局，我試圖實現。我有一個.container類，標識浮動到左側，然後我想要一個引導的導航欄漂浮到右邊，也是在容器的頂部，它似乎正確地與「拉右」類正確地浮動帶有引導程序的「navbar-nav」類，但它位於品牌標誌下方，我不能爲了我的生活找出爲什麼或如何使它正確對齊。Navbar與自舉對齊？

不管怎麼說，繼承人的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; 
}

我缺少什麼？

來源

2015-10-26 newman

它只是因爲您已將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-->

只是DEMO你

來源

2015-10-26 04:03:22

啊，我知道這是簡單的東西。出於某種原因，我並沒有把它看作是一個有着自己的利潤和填充的元素，而是所有這些。非常感謝你的幫助。 – newman

沒關係.. :)快樂編碼... :) –

Navbar與自舉對齊？

回答

相關問題