只是想知道是否有办法调整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;
}
正如您所希望的那样,切换器图标对于我为导航栏高度选择的尺寸来说太大了。非常感谢任何帮助。
答案 0 :(得分:1)
我只是想,如果你想要一个简单的解决方案,你可以使用字体真棒:
http://fontawesome.io/icon/bars/
你可以使用只有class="fa fa-bars fa-2"
的条形图,其中fa-2
是条形图的大小。
答案 1 :(得分:1)
试试这个:
.navbar-toggle {
padding: 4px 3px !important;
}
和
.navbar-toggle .icon-bar {
width: 14px !important;
height: 1px;
}
你可能会在填充和宽度上添加重要内容来覆盖boostrap css。 但这应该可以胜任。
答案 2 :(得分:1)
在bootstrap 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>
</
&#13;
在bootstrap 4中
.navbar-inverse .navbar-toggler-icon{
padding: 30px !important;
}
注意:在bootstrap 4中,您无法独立增加高度/宽度。使用height
时,它会影响width
和padding
。
答案 3 :(得分:0)
U可以手动更改每个宽度和高度值的特定值,或者为它们提供所有%值,只需更改主导航栏的高度和宽度。如果这些值具有%值,则可以将它们放在div中。
答案 4 :(得分:0)
在Bootstrap 4.1中。您很可能会使用“ navbar-toggler-icon”类。 在女巫的情况下,如果您只想调整小节的大小,则只需调整其字体大小:
.navbar-toggler-icon{
font-size: 0.8em;
}
如果您要调整其周围按钮的大小,只需将“ navbar-toggler”定位为目标,并根据需要弄乱填充/边距:
.navbar-toggler{
padding-top: 2%;
padding-bottom: 2%;
}