부트 스트랩 메뉴 항목 너비

Question

부트 스트랩을 사용하여 만든 navbar와 관련하여 이상하고 아주 사소한 문제를 해결하려고합니다. 공백의 여백과 같은 것 같습니다. 사진에서
을 의도 한대로 메뉴 항목은 페이지의 전체 폭을 차지 다음과 같이
Before (default sizing)
After (Attempting to resize width of menu items)

내 네비게이션 바 코드는 다음과 같습니다

/* 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; 
 
}

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

Answer 1

이 작업이 진행 중입니다. 위에서 코드를 navbar 코드와 통합하고 있습니까? 지금 당장은 짧지 만 곧 돌아올 것입니다.

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

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