Question

我试图解决一个奇怪的，可能是非常小的问题，关于我使用Bootstrap制作的导航栏 - 似乎有像白色空间的边缘，这意味着我不能使菜单项占据整个宽度页面如预期的那样在图片中：
Before (default sizing)
After (Attempting to resize width of menu items)

我的导航栏代码如下：

＆＃13;

/* Navigation Bar */

.navbar a {
  color: white !important;
  text-align: center;
  padding: 0;
  transition: all 0.2s ease;
}

.dropdown {
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  font-size: 3em;
  font-weight: 100;
  color: white !important;
  text-align: center;
  width: 20%;
}

.dropdown-menu {
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, "sans-serif";
  font-size: 0.8em;
  min-width: 100%;
  text-align: center;
}

.dropdown-toggle:active,
.open .dropdown-toggle {
  color: black !important;
  background-color: white !important;
}

.dropdown-toggle:hover {
  color: black !important;
  background-color: white !important;
}

.dropdown-toggle {}

.active {
  padding: 0;
  text-align: center;
}

.active a {
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  font-size: 3em;
  font-weight: 100;
  color: white !important;
}

.active a:hover {
  background-color: white !important;
  color: black !important;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default col-lg-12">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a style="background-color:#61A1C4" href="../aboutus.html">About</a></li>
      <li style="background-color:#6E78B4;" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Rehearsals
        <span class="caret"></span></a>
        <ul style="background-color:#6E78B4;" class="dropdown-menu">
          <li><a style="width:100%;" href="../liveroom.html">Live Room</a></li>
          <li><a href="../isolationroom.html">Isolation Room</a></li>
        </ul>
      </li>
      <li style="background-color:#D1C733;" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Recording
        <span class="caret"></span></a>
        <ul style="background-color:#D1C733" class="dropdown-menu">
          <li><a href="../audiorecording.html">Audio</a></li>
          <li><a href="../videorecording.html">Video</a></li>
        </ul>
      </li>
      <li style="background-color:#80C94A;" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">For Hire
        <span class="caret"></span></a>
        <ul style="background-color:#80C94A;" class="dropdown-menu">
          <li><a href="../hirepackages.html">Event Packages</a></li>
          <li><a href="../largeevents.html">Large Events</a></li>
          <li><a href="../equipmenthire.html">Equipment</a></li>
          <li><a href="../bandhire.html">Bands</a></li>
        </ul>
      </li>
      <li style="background-color:#9466A4" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Other Services
        <span class="caret"></span></a>
        <ul style="background-color:#9466A4" class="dropdown-menu">
          <li><a href="../buyandsell.html">Buy & Sell</a></li>
          <li><a href="../repairs.html">Repairs</a></li>
        </ul>
      </li>
      <li class="active"><a style="background-color:#D44C92" href="../contact.html">Contact Us</a></li>
    </ul>

  </div>
</nav>

＆＃13;

Answer 1

这是一项正在进行的工作。我将上面的代码与导航条代码集成在一起。现在时间很短，但很快就会回来。

＆＃13;

.navbar a {
  color: white !important;
  text-align: center;
  padding: 0;
  transition: all 0.2s ease;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" style="background-color:#61A1C4" href="../aboutus.html">About</a>
      </li>
      <li style="background-color:#6E78B4;" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Rehearsals
    <span class="caret"></span></a>
        <ul style="background-color:#6E78B4;" class="dropdown-menu">
          <li><a style="width:100%;" href="../liveroom.html">Live Room</a></li>
          <li><a href="../isolationroom.html">Isolation Room</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

引导程序菜单项宽度

1 个答案: