gpt4 book ai didi

html - Bootstrap 图标是蓝色而不是白色,而且垂直位置不佳

转载 作者:太空宇宙 更新时间:2023-11-04 13:40:14 25 4
gpt4 key购买 nike

我想要两个彼此相邻的图标(它们之间几乎没有空格),我将它们放在同一个 li 和同一个 div 中,但它们现在是蓝色的并且垂直定位不佳,我应该使用什么 Bootstrap 类或自定义样式或其他任何东西使用(仅输入 2 里行不通,图标之间的空间太大)? :

https://www.w3schools.com/code/tryit.asp?filename=FD6NR1HEOO3W

enter image description here

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
<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 class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group">
<a href="#"><span class="glyphicon glyphicon-user"></span></a>
<a href="#"><span class="glyphicon glyphicon-log-in"></span></a>
</div>
</li>
</ul>
</div>
</div>
</nav>

<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

最佳答案

你不应该使用 <div>里面<li>我使用了两种不同的 li对于两个图标并添加了两个类,请检查以下代码段:

注意:您可以通过增加内边距来调整图标之间的间距

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.navbar-right li{
display:inline-block
}
.navbar-right li .left_padd {
padding-left:0;
}
.navbar-right li .right_padd {
padding-right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
<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 class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>

<a class="right_padd" href="#"><span class="glyphicon glyphicon-user"></span></a><li>
<li><a class="left_padd" href="#"><span class="glyphicon glyphicon-log-in"></span></a></li>

</li>
</ul>
</div>
</div>
</nav>

<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

关于html - Bootstrap 图标是蓝色而不是白色,而且垂直位置不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42494703/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com