Css 引导标头导航填充容器_Css_Twitter Bootstrap

Css 引导标头导航填充容器

css twitter-bootstrap

Css 引导标头导航填充容器,css,twitter-bootstrap,Css,Twitter Bootstrap,我在导航栏上移动了一些按钮，现在它没有完全填满容器的宽度 <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"&

我在导航栏上移动了一些按钮，现在它没有完全填满容器的宽度

    <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显示器上，按钮要均匀填充的容器的宽度为1140px

谢谢你的时间。

你在找这个吗？否则回复我

<!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>

我已经用更多的相关细节更新了问题-很抱歉，这让我很痛苦！你使用的是哪个版本的引导，你也需要发布你的CSS。在JSFIDLE中，导航栏似乎没有正确显示。我遇到了与此相同的问题，但是该问题中的解决方案不起作用。为什么您不至少从默认的

navbar

结构开始呢？