Bootstrap Header Nav填充容器

我在導航欄上移動了一些按鈕，現在它沒有完全填充容器寬度。Bootstrap Header Nav填充容器

<div class="container"> 
    <div class="header-nav-bar home-slide"> 
    <nav> 

     <button><i class="fa fa-bars"></i></button> 

     <ul class="primary-nav list-unstyled"> 
     <li class="bg-color"><a href="#">Home</a></li> 
     <li class=""><a href="#">Company</a></li> 
     <li><a href="#">Price</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">FAQ</a></li> 
     <li><a href="#">Terms</a></li> 
     </ul> 
    </nav> 
    </div> 
</div>

我曾嘗試使用「容器流體」，但似乎沒有任何關於按鈕寬度的變化。

在1920 x 1080顯示器上，按鈕均勻填充的容器大小爲1140像素寬。

謝謝你的時間。

來源

2015-12-08 PublicDisplayName

您正在使用哪個版本的Bootstrap，並且您還需要發佈CSS。 – vanburen

這是[jsfiddle]（http://jsfiddle.net/eomopvte/），我使用的是v3.2.0版本。在jsfiddle中，導航欄似乎沒有正確顯示。我遇到與[this]相同的問題（http://stackoverflow.com/questions/22247911/how-to-stretch-elements-of-a-bootstrap-navigation-bar-to-make-use-of- - 整個）但是在這個問題的解決方案不起作用 – PublicDisplayName

是否有一個原因，你至少沒有啓動默認的'navbar'結構？ – vanburen

你在找？否則回覆我。

<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 


</head> 

<body> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 

     <button> <i class="fa fa-bars"></i></button> 
    </div> 
    <div> 
     <ul class="nav navbar-nav"> 
     <li class="bg-color"><a href="#">Home<i class="fa fa-angle-down"></i></a> 

      <li><a href="#">Home</a></li> 


     </li> 

     <li class=""><a href="#">Company<i class="fa fa-angle-down"></i></a> 


      <li><a href="#">Newsletter</a></li> 


     </li> 

     <li><a href="search-page.html">Search Page</a></li> 

      <li> <a href="#">Blog<i class="fa fa-angle-down"></i></a> 


      <li><a href="blog-list.html">Blog list</a></li> 
      <li><a href="blog-post.html">Blog-post</a></li> 




     <li><a href="price.html">Price</a></li> 
     <li><a href="about-us.html">About Us</a></li> 
     <li><a href="contact-us.html">Contact Us</a></li> 

    </div> 
    </div> 
</nav> 



</body> 
</html>

來源

2015-12-08 13:43:23

我已經用更多的相關細節更新了這個問題 - 抱歉是一種痛苦！ – PublicDisplayName

Bootstrap Header Nav填充容器

回答

相關問題