Question

首先抱歉我的英语。

我创建了以下Bootstrap菜单（见图1）......

Current Menu

但我想做那样的事情（见第二张图片）......

I would like to do that

我想用我的菜单覆盖100％的（相当），是否可能？

我试过玩代码。但是，我只能将整个菜单推向右侧，中间或左侧，但我无法实现目标。

菜单HTML和CSS

＆＃13;

/* Nav CSS */

.navbar-inverse {
  background-color: #57545B !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
  background-color: #37353A !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
  background-color: #413E44 !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.dropdown-menu {
  background-color: #EBECEE !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  background-color: #C9CACC !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.navbar-inverse {
  background-image: none;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  background-image: none;
}
.navbar-inverse .navbar-nav>li>a {
  color: #FBFBFB !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
  color: #C9CACC !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
  color: #C9CACC !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
  color: #C9CACC !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.dropdown-menu>li>a {
  color: #7E7983 !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  color: #37353A !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.navbar-inverse .navbar-nav>.dropdown>a .caret {
  border-top-color: #EBECEE !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
  border-top-color: #C9CACC !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.navbar-inverse .navbar-nav>.dropdown>a .caret {
  border-bottom-color: #EBECEE !important;
  font-weight: 400 !important;
  text-decoration: none !important
}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
  border-bottom-color: #C9CACC !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">


  <title>Untitled Document</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Css -->
  <link rel="stylesheet" type="text/css" href="TAP_css.css" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" type="text/css">

  <!-- Latest compiled and minified JavaScript -->
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>





</head>

<body>

  <!-- Menu Bar -->
  <div style="background-color:#57545b;">
    <div class="container">
      <div class="row">



        <nav style=" margin:0px; border:0px; " class="navbar navbar-inverse bs-docs-nav" role="banner">
          <div class="container">
            <div class="navbar-header">
              <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>

            </div>
            <nav class="collapse navbar-collapse bs-navbar-collapse" id="navsm" style="padding-left:0px; width:100%" role="navigation">
              <ul class="nav navbar-nav">
                <li class="active">
                  <a href="#">Home</a>
                </li>

                <li><a href="#">Affiliates</a>
                </li>
                <li><a href="#">Affiliate Programs</a>
                </li>



                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Advertisers<span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Agencies</a>
                    </li>
                    <li><a href="#">Advertisers</a>
                    </li>
                    <li><a href="#">Merchants</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">All brands</a>
                    </li>

                  </ul>
                </li>

                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Services<span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Custom creatives</a>
                    </li>
                    <li><a href="#">Web services</a>
                    </li>
                    <li><a href="#">Lead generation</a>
                    </li>

                    <li><a href="#">Data monetization</a>
                    </li>

                    <li><a href="#">SMS data</a>
                    </li>

                    <li><a href="#">Tracking systems</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">All services</a>
                    </li>

                  </ul>
                </li>
                <li><a href="#">Case studies </a>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">About us<span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Testimonials</a>
                    </li>
                    <li><a href="#">Carers</a>
                    </li>

                    <li class="divider"></li>
                    <li><a href="#">All about us</a>
                    </li>

                  </ul>
                </li>

                <li><a href="#">Contact us</a>
                </li>
              </ul>


            </nav>


          </div>



        </nav>



      </div>

    </div>
  </div>
  <!-- E Menu Bar -->

</body>

</html>

＆＃13;

由于

Answer 1

您可以使用以下示例中的flexbox：

小提琴：https://jsfiddle.net/8ctg6vsh/

这将使导航栏100％宽度并使内部<li>元素具有相同的宽度。

请注意，您可以从此处查看浏览器支持：http://caniuse.com/#search=flex

您还需要以某种方式使其响应。

我怎样才能在100％的<nav>中公平分配我的Bootstrap菜单？

1 个答案: