Bootstrap導航欄觸發器圖標（漢堡）大小

想知道是否有任何方法來調整Bootstrap的導航欄觸發器圖標？Bootstrap導航欄觸發器圖標（漢堡）大小

我使用的.navbar-dark主題爲模板，這裏的尺寸：

.navbar-dark { 
    background-color: #111 !important; 
} 

.navbar { 
    background-image: url("/images/Harris_Logo_Small2.svg"); 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 25px; 
    padding: 0px; 
    margin: 3px; 
} 

.navbar-nav { 
    background-color: #111111; 
    border-color: #111111; 
}

這裏是相應的CSS：

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

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

button.navbar-toggler { 
    background-color: #111111; 
    height: 25px; 
    width: 25px; 
} 

button.navbar-toggler .icon { 
    background-color: #111; 
} 

.navbar-default .navbar-toggle .icon-bar{ 
    background-color: #111; 
} 

.navbar .navbar-toggle .navbar-toggler-icon { 
    color: #ecf0f1; 
    height: 20px !important; 
    width: 20px !important; 
}

正如你（希望）看到，切換器圖標對於我爲導航欄高度選擇的尺寸而言太大了。任何幫助是極大的讚賞。

來源

2017-10-18 Sloan Bell

您能否給我們提供一些實時代碼示例（可能在JSFiddle中）或某些圖像，以便能夠看到「錯誤」的行爲。 – Krusader

在引導3：

您可以覆蓋.navbar-toggle .icon-bar引導類。檢查下面的代碼片段以供參考。

.navbar-dark { 
 
    background-color: #111 !important; 
 
} 
 
.navbar-toggle .icon-bar{ 
 
    width: 50px !important; 
 
    height:3px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse navbar-dark"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span>       
 
     </button> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#">Page 1</a> 
 
     </li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    </

在自舉4：

.navbar-inverse .navbar-toggler-icon{ 
    padding: 30px !important; 
}

注：在自舉4你不能獨立增加高度/寬度。當使用padding時，它將影響height和width。

來源

2017-10-18 07:03:39

我確實用Bootstrap4構建它，我認爲這就是我遇到的一些問題。顯然這個文檔還沒完成，我試圖按照BS3文檔來設計它，這顯然不起作用。我感謝所有的幫助，每個人！ –

我當時就在想，如果你想有一個簡單的解決方案，你也許可以使用字體真棒：

http://fontawesome.io/icon/bars/

您可以使用棒只用：class="fa fa-bars fa-2"其中fa-2是酒吧的大小。

來源

2017-10-18 06:47:01

U可以手動更改每個寬度和高度值的特定值，或給出所有這些值的值，並且只更改主導航欄的高度和寬度。如果這些值有％值，你可以把它們放在一個div中。

來源

2017-10-18 06:51:10

試試這個：

.navbar-toggle { 
    padding: 4px 3px !important; 
}

和

.navbar-toggle .icon-bar { 
    width: 14px !important; 
    height: 1px; 
}

您可以添加重要的填充和寬覆蓋自舉CSS。但這應該做的工作。

來源

2017-10-18 06:54:37 key

Bootstrap導航欄觸發器圖標（漢堡）大小

回答

相關問題