在引導4

護短一個導航欄我有我已經利用了split button dropdowns和定期nav-items沒有下拉菜單導航欄一。在引導4

我有幾分工作，但我試圖讓導航元素，以填補瀏覽器窗口。我已經看到引用了一個「工廠」Bootstrap類，它會做到這一點，但我無法得到它的工作。

我有2個問題：

什麼是自舉4這樣的「工廠」的方法呢？
爲什麼按鈕元素不一致之間的間隔？

body { 
 
    padding-top: 70px 
 
} 
 

 
.vcenter { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    float: none; 
 
} 
 

 

 
/* CSS menu */ 
 
.navbar, .navbar.btn-secondary { 
 
    /* For browsers that do not support gradients */ 
 
    background-color: #b32017; 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background: -webkit-linear-gradient(#b32017, #801710); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background: -o-linear-gradient(#b32017, #801710); 
 
    /* For Firefox 3.6 to 15 */ 
 
    background: -moz-linear-gradient(#b32017, #801710); 
 
    /* Standard syntax */ 
 
    background: linear-gradient(#b32017, #801710); 
 
} 
 

 
.navbar .btn-secondary { 
 
    /*background-color: #b32017;*/ 
 
    /* For browsers that do not support gradients */ 
 
    background-color: #b32017; 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background: -webkit-linear-gradient(#b32017, #801710); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background: -o-linear-gradient(#b32017, #801710); 
 
    /* For Firefox 3.6 to 15 */ 
 
    background: -moz-linear-gradient(#b32017, #801710); 
 
    /* Standard syntax */ 
 
    background: linear-gradient(#b32017, #801710); 
 
} 
 

 
.navbar img { 
 
    max-height: 40px; 
 
} 
 

 
.navbar .btn { 
 
    /* Removes Bootstrap's border */ 
 
    border: 0px; 
 
} 
 

 
.navbar .navbar-brand { 
 
    color: #ffffff; 
 
} 
 

 
.navbar .navbar-brand:hover, .navbar .navbar-brand:focus { 
 
    color: #c1c1c1; 
 
} 
 

 
.navbar .navbar-text { 
 
    color: #ffffff; 
 
} 
 

 
.navbar .navbar-nav .nav-link { 
 
    color: #ffffff; 
 
    border-radius: .25rem; 
 
    margin: 0 0.25em; 
 
} 
 

 
.navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus { 
 
    color: #c1c1c1; 
 
} 
 

 
.navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link:hover, .navbar .navbar-nav .nav-item.active .nav-link:focus, .navbar .navbar-nav .nav-item.show .nav-link, .navbar .navbar-nav .nav-item.show .nav-link:hover, .navbar .navbar-nav .nav-item.show .nav-link:focus { 
 
    color: #c1c1c1; 
 
    background-color: #801710; 
 
} 
 

 
.navbar .navbar-toggle { 
 
    border-color: #801710; 
 
} 
 

 
.navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus { 
 
    background-color: #801710; 
 
} 
 

 
.navbar .navbar-toggle .navbar-toggler-icon { 
 
    color: #ffffff; 
 
} 
 

 
.navbar .navbar-collapse, .navbar .navbar-form { 
 
    border-color: #ffffff; 
 
} 
 

 
.navbar .navbar-link { 
 
    color: #ffffff; 
 
} 
 

 
.navbar .navbar-link:hover { 
 
    color: #c1c1c1; 
 
} 
 

 
@media (max-width: 767px) { 
 
    .navbar .navbar-nav .open .dropdown-menu .dropdown-item .dropdown-menu.show { 
 
    /* no gradient support */ 
 
    /* #cccccc */ 
 
    color: #ffffff; 
 

 
    /* For browsers that do not support gradients */ 
 
    background-color: #ffffff; 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background: -webkit-linear-gradient(#ffffff, #cccccc); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background: -o-linear-gradient(#ffffff, #cccccc); 
 
    /* For Firefox 3.6 to 15 */ 
 
    background: -moz-linear-gradient(#ffffff, #cccccc); 
 
    /* Standard syntax */ 
 
    background: linear-gradient(#ffffff, #cccccc); 
 

 
    } 
 
    .navbar .navbar-nav .open .dropdown-menu .dropdown-item:hover, .navbar .navbar-nav .open .dropdown-menu .dropdown-item:focus { 
 
    color: #c1c1c1; 
 
    } 
 
    .navbar .navbar-nav .open .dropdown-menu .dropdown-item.active { 
 
    color: #c1c1c1; 
 
    background-color: #801710; 
 
    } 
 
}

<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.11.0/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <title>Experimental Test Page</title> 
 
</head> 
 

 
<body> 
 
    <!-- Navigation --> 
 
    <nav class="navbar fixed-top navbar-expand-sm bg-faded navbar-light"> 
 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <!-- Brand --> 
 
    <a class="navbar-brand" href="#"> 
 
    </a> 
 
    <div class="collapse navbar-collapse" id="nav-content"> 
 
     <ul class="navbar-nav btn-group"> 
 
     <!-- Home --> 
 
     <li class="nav-item"> 
 
      <div class="btn-group"> 
 
      <a href="#" class="btn btn-secondary" role="button"><i class="fa fa-fw fa-home"><!-- --></i> Home</a> 
 
      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> 
 
      </button> 
 
      <div class="dropdown-menu"> 
 
       <a class="dropdown-item" href="#"><i class="fa fa-fw fa-map-marker"><!-- --></i>Hours &amp; Location</a> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <div class="btn-group" role="button"> 
 
      <a href="#" class="btn btn-secondary" role="button">Section</a> 
 
      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> 
 
      </button> 
 
      <div class="dropdown-menu"> 
 
       <a class="dropdown-item" href="#">Item 1</a> 
 
       <a class="dropdown-item" href="#">Item 2</a> 
 
       <a class="dropdown-item" href="#">Item 3</a> 
 
       <a class="dropdown-item" href="#">Item 4</a> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link btn btn-secondary" href="#" role="button">Another Section</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link btn btn-secondary" href="#" role="button">Section</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link btn btn-secondary" href="#" role="button">Section</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <div class="btn-group" role="button"> 
 
      <a href="#" class="btn btn-secondary" role="button">Products</a> 
 
      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> 
 
      </button> 
 
      <div class="dropdown-menu"> 
 
       <a class="dropdown-item" href="#">Item 1</a> 
 
       <a class="dropdown-item" href="#">Item 2</a> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</body> 
 

 
</html>

來源

2017-08-25 Adrian

你可以使用nav-justified，確保導航欄，導航是全寬使用w-100 ...

<ul class="navbar-nav w-100 nav-justified"> 
     <li class="nav-item">..<li> 
     <li class="nav-item">..<li> 
</ul>

https://www.codeply.com/go/od0TnGfQv2

來源

2017-08-25 11:25:51 ZimSystem

謝謝你，這麼迅速回應！你有什麼建議作爲正確的方式來獲得拆分按鈕組來改變'hover'的方式獨立環節上做到文本顏色？ – Adrian

明白了！在按鈕上添加'nav-link'作爲一個類，讓它們像獨立鏈接那樣工作。 – Adrian

遇到同樣的問題，與我同在，但與商標。我只是說nav-justified & w-100類與navbar-nav類一起。

這裏導航欄的屏幕截圖。

這裏的代碼：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded px-5"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <a class="navbar-brand" href="#"> 
      <img src="img/logo.png" class="img-fluid" alt="Logo"> 
     </a> 
     <div class="collapse navbar-collapse" id="navbarNav"> 
      <ul class="navbar-nav nav-justified w-100"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">About us</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#"> Services</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#"> Mission & Vission</a> 
       </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
         Brands 
        </a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
         <a class="dropdown-item" href="#">Alo maids</a> 
         <a class="dropdown-item" href="#">Alo Technical</a> 
         <a class="dropdown-item" href="#">Something else here</a> 
        </div> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#"> Brands</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#"> Brands</a> 
       </li> 
      </ul> 
     </div> 
    </nav>

來源

2018-01-22 07:24:19

回答

相關問題