Bootstrap导航栏切换器图标（汉堡包）大小

Question

Bootstrap导航栏切换器图标（汉堡包）大小

8

想知道有没有办法调整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;
}

希望你能看到，切换图标对于我选择的导航栏高度来说太大了。非常感谢任何帮助。

- Sloan Bell

1

请您提供一些实时的代码示例（例如在JSFiddle上）或者一些图片，以便我们能够看到“错误”的行为。 - Krusader

5个回答

3

在Bootstrap 4.1中，您最有可能使用"navbar-toggler-icon"类。在这种情况下，如果您只想调整条的大小，则只需调整其字体大小：

.navbar-toggler-icon{
    font-size: 0.8em;
}

如果您想调整按钮的大小，请针对“navbar-toggler”进行目标定位，并根据需要调整填充/边距：

.navbar-toggler{
    padding-top: 2%;
    padding-bottom: 2%;
}

- CoverEye

1

我在想，如果您需要一个简单的解决方案，您可以使用字体图标库Font Awesome：

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

您可以仅使用 class="fa fa-bars fa-2" 来使用这些栏，其中 fa-2 是栏的大小。

- Nash Carp

1

试试这个：

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

并且

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

你可以通过调整padding和width来覆盖Bootstrap的CSS，以达到重要性的添加。但这应该已经可以解决问题了。

- key

0

您可以手动更改每个宽度和高度值的特定值，或者给它们所有的%值并仅更改主导航栏的高度和宽度。如果这些值具有%值，则可以将它们放在一个div中。

- Er.Er

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RaJesh RiJo · Accepted Answer

在Bootstrap 3中:

您可以覆盖.navbar-toggle .icon-bar Bootstrap类。请参考下面的代码片段。

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

在Bootstrap 4中：

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

注意: 在Bootstrap 4中，您无法独立增加高度/宽度。当使用padding时，它将影响height和width。