- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
只是想知道是否有任何方法可以调整 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;
}
正如您(希望)看到的那样,切换器图标对于我为导航栏高度选择的尺寸来说太大了。非常感谢任何帮助。
最佳答案
在 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
。
关于html - Bootstrap 导航栏切换器图标(汉堡包)大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46804180/
我需要将抽屉导航图标(汉堡包)从操作栏移动到选项卡布局,以使其看起来像提供的示例。那应该在列表滚动上执行。是否有可能将 View 从操作栏移动到选项卡布局? 操作栏 预期结果 最佳答案 您可以像这样在
我一直在寻找这个问题很长一段时间,但找不到任何解决方案。 我想实现这种按钮,当抽屉关闭时,它看起来像一个汉堡包抽屉导航按钮。但是当它打开时,图标会动画并转换为“后退按钮”,如图所示。 最佳答案 那是
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-top
我对 html、css、js 和 bootstrap 4 还很陌生。我正在尝试建立一个网站来练习我的技能。我终于设法改变了我的 bootstrap 4 导航栏的颜色、文本、字体大小等,但是当我缩小时,
我想为我的导航栏设置自定义颜色 (#5f788a),但是,据我所知,为了在移动版本中使用切换菜单,导航栏类必须是 navbar-light或 navbar-dark(根据 Bootstrap)。当然,
只是想知道是否有任何方法可以调整 Bootstrap 的导航栏切换器图标的大小? 我使用 .navbar-dark 主题作为模板,尺寸如下: .navbar-dark { background-c
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this q
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗?更新问题,以便可以通过 editing this post 用事实和引文回答问题. 2年前关闭。 Improve t
我正在使用 bootstrap 4 构建这个导航栏。 导航栏工作正常,但有一个问题我无法自己解决。 在折叠时,汉堡包图标显示两行而不是三行。我不确定汉堡包为什么会这样出现,但我确定它与伪元素有关。 我
我是一名优秀的程序员,十分优秀!