Question

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

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

我曾试图使用＆＃34;容器液＆＃34;然而，似乎没有任何关于按钮宽度发生变化的事情。

在1920 x 1080显示器上，按钮均匀填充的容器尺寸为1140像素宽。

感谢您的时间。

Answer 1

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

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

Bootstrap Header Nav填充容器

1 个答案: