<分区>
html - Bootstrap 导航栏左右浮动
大家好，我正在使用 bootstrap 3 并试图让我的导航栏看起来像这样:
我面临的问题是试图让 Logo 向左浮动，然后让图标向右浮动，我已经进行了研究并看到了其他与此有关的堆栈问题，但我一生都做不到根本没有修复它，我不知道为什么，
.navbar-nav {
padding-left: 15px;
padding-right: 0;
}
.navbar-nav>li>a {
line-height: 80px;
padding: 0 15px !important;
}
.navbar-brand {
color: #cccccc !important;
font-size: 20px;
line-height: 20px;
font-weight: 500;
height: auto;
padding: 20px 15px;
}
.navbar-brand>img {
width: auto;
max-height: 28px;
margin-top: 5px;
}
.navbar-default {
background-color: white;
border: none !important;
border-bottom: 1px solid #e8e9eb !important;
}
.secondary-nav a {
color: #111111;
}
.secondary-nav a:hover {
color: #c39d6d;
}
.secondary-nav a.shopping-cart {
line-height: 14px;
position: relative;
width: 45px;
height: 20px;
}
.secondary-nav a.shopping-cart i {
margin-right: 15px;
}
.secondary-nav .cart-badge {
position: absolute;
top: -4px;
right: 6px;
color: white;
background: #ad8b60;
border-radius: 50px;
font-size: 9px;
font-weight: 400;
line-height: 10px;
padding: 2px 4px;
}
.space-right {
padding-right: 15px !important;
}
.navbar-nav {
float: right;
}
nav .secondary-nav {
float: right;
margin-top: 30px;
margin-left: 30px;
padding-right: 15px;
}
.nav-sec .navbar-nav {
float: none;
}
.nav-sec .navbar-nav>li {
float: none;
display: inline-block;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default nav-sec navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="Images/logo.png" alt="logo"></a>
</div><!-- / navbar-header -->
<div class="secondary-nav">
<a href="login-register.html" class="my-account space-right"><i class="fa fa-search"></i></a>
<a href="shopping-cart.html" class="shopping-cart"><i class="fa fa-shopping-cart"></i> <span class="cart-badge">2</span></a>
</div>
<div class="navbar-collapse text-center collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li><a href="index.html"><span>HOME</span></a></li>
<li><a href="about.html"><span>ABOUT US</span></a></li>
<li><a href="about.html"><span>PRODUCTS</span></a></li>
<li><a href="about.html"><span>INSPIRATION</span></a></li>
<li><a href="contact.html"><span>CONTACT</span></a></li>
</ul>
</div><!--/ nav-collapse -->
</div><!-- / container -->
</nav>希望有人能救救我:)
再次感谢
最佳答案
您可以尝试在容器上使用 display: flex 和 justify-content: space-between 这样如果您的容器有 3 个子项( Logo 、主菜单、图标)，自动将第一个放在左边，菜单在中间，图标在权利。
我创建了这个 jsfiddle 试试看
https://jsfiddle.net/DTcHh/48838/
.navbar .container {
display: flex;
justify-content: space-between;
}
<nav class="navbar navbar-default nav-sec navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="Images/logo.png" alt="logo"></a>
</div><!-- / navbar-header -->
<div class="navbar-collapse text-center collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li><a href="index.html"><span>HOME</span></a></li>
<li><a href="about.html"><span>ABOUT US</span></a></li>
<li><a href="about.html"><span>PRODUCTS</span></a></li>
<li><a href="about.html"><span>INSPIRATION</span></a></li>
<li><a href="contact.html"><span>CONTACT</span></a></li>
</ul>
</div><!--/ nav-collapse -->
<div class="secondary-nav">
<a href="login-register.html" class="my-account space-right"><i class="fa fa-search"></i></a>
<a href="shopping-cart.html" class="shopping-cart"><i class="fa fa-shopping-cart"></i> <span class="cart-badge">2</span></a>
</div>
</div><!-- / container -->
</nav>
关于html - Bootstrap 导航栏左右浮动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49051672/