bootstrap 导航栏左右浮动 [英] bootstrap navbar floating left and right

问题描述

大家好，我正在使用 bootstrap 3 并试图让我的导航栏看起来像这样:

我面临的问题是试图让徽标向左浮动，然后将图标向右浮动，我已经进行了研究并看到了其他有关此问题的堆栈问题，但对于我的生活，我可以'根本没有修复它，我不知道为什么，

.navbar-nav {左边距:15px；填充右:0;}.navbar-nav>li>a {行高:80px；填充:0 15px ！重要；}.navbar-brand {颜色:#cccccc ！重要；字体大小:20px；行高:20px；字体粗细:500；高度:自动；填充:20px 15px；}.navbar-brand>img {宽度:自动；最大高度:28px；边距顶部:5px；}.navbar-default {背景颜色:白色；边界:无！重要；边框底部:1px 实心 #e8e9eb !important;}.secondary-nav a {颜色:#111111；}.secondary-nav a:hover {颜色:#c39d6d；}.secondary-nav a.shopping-cart {行高:14px；位置:相对；宽度:45px；高度:20px；}.secondary-nav a.shopping-cart i {右边距:15px；}.secondary-nav .cart-badge {位置:绝对；顶部:-4px；右:6px；白颜色;背景:#ad8b60；边框半径:50px；字体大小:9px；字体粗细:400；行高:10px；填充:2px 4px；}.space-right {padding-right: 15px !important;}.navbar-nav {浮动:对；}导航 .secondary-nav {浮动:对；边距顶部:30px；左边距:30px；padding-right: 15px;}.nav-sec .navbar-nav {浮动:无；}.nav-sec .navbar-nav>li {浮动:无；显示:内联块；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><nav class="navbar navbar-default nav-sec navbar-fixed-top"><div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="index.html"><img src="Images/logo.png" alt="logo"></a></div><!--/导航栏标题--><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 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>关于我们</span></a></li><li><a href="about.html"><span>产品</span></a></li><li><a href="about.html"><span>INSPIRATION</span></a></li><li><a href="contact.html"><span>CONTACT</span></a></li></div><!--/nav-collapse --></div><!--/容器--></nav>

希望有人能救我:)

再次感谢

解决方案

好的，我想出了一个在下班后以某种方式修复它的方法:

HTML:

 
<div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

<div class="navbar-collapse collapse"><ul class="nav navbar-nav"><a class="navbar-brand" href="index.html"><img src="Images/logo.png" alt="logo"></a><ul class="nav navbar-nav navbar-center"><li><a href="index.html"><span>HOME</span></a></li><li><a href="about.html"><span>关于我们</span></a></li><li><a href="about.html"><span>产品</span></a></li><li><a href="about.html"><span>INSPIRATION</span></a></li><li><a href="contact.html"><span>CONTACT</span></a></li><ul class="nav navbar-nav navbar-right"><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>

</nav>

CSS:

@media(最小宽度:768px){.navbar-nav.navbar-center {位置:绝对；左:50%；变换:translatex(-50%);}}导航 .secondary-nav {浮动:对；边距顶部:30px；左边距:30px；padding-right: 15px;}

Hi guys I'm using bootstrap 3 and trying to get my navbar to look something like this :

The problem I'm facing is trying to get the logo to float to the left and then the icons to float to the right, i have done research and seen other stack questions on this but for the life of me i can't fix it at all and i have no idea why,

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

Hopefully someone can save me :)

Thanks again

解决方案

Ok i figured a way to fix it somehow after hours :

HTML:

 <nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <a class="navbar-brand" href="index.html"><img src="Images/logo.png" alt="logo"></a>
    </ul>
    <ul class="nav navbar-nav navbar-center">
                    <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>
    <ul class="nav navbar-nav navbar-right">
                  <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>
    </ul>
  </div>
</nav>

CSS:

@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

nav .secondary-nav {
    float: right;
    margin-top: 30px;
    margin-left: 30px;
    padding-right: 15px;
}

这篇关于bootstrap 导航栏左右浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！