以居中的导航栏为中心导航栏品牌形象

时间：2014-12-30 08:01:47

标签： javascript jquery html css twitter-bootstrap

我刚学习 Bootstrap 3 ，我想在我的网站上使用它，所以从移动设备访问仍然很舒服。

我想实现这样的目标：

enter image description here

但这是我得到的。 这是代码： jsfiddle 

.navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
    height:30px;
}

.navbar-brand:hover,
.navbar-brand:focus {
   text-decoration: none;
}

.navbar-brand > img {
   display: inline-block;
   margin:auto;
}

@media (min-width: 768px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
  }
}

.navbar .divider-vertical {
   height: 50px;
   margin: 0 9px;
   border-right: 1px solid #ffffff;
   border-left: 1px solid #f2f2f2;
}

.navbar-inverse .divider-vertical {
   border-right-color: #222222;
   border-left-color: #111111;
}

@media (max-width: 767px) {
  .navbar-collapse .nav > .divider-vertical {
     display: none;
  }
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
		
   <div class="navbar navbar-default navbar-static-top">
     <div class="container">				
       <a href="#" class="navbar-brand"><img src="image/nav_logo.png"/></a>	
       <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
	     <span class="icon-bar"></span>
	     <span class="icon-bar"></span>
	     <span class="icon-bar"></span>
       </button>			
       <div class="collapse navbar-collapse navHeaderCollapse">				
	     <ul class="nav navbar-nav navbar-left">
		   <li class="active"><a href="#">Home</a></li>
		   <li class="divider-vertical"></li>
		   <li><a href="#">Product</a></li>
	     </ul>				
	     <ul class="nav navbar-nav navbar-right">
		   <li><a href="#">About</a></li>
		   <li class="divider-vertical"></li>
		   <li><a href="#">Contact</a></li>
	     </ul>				
       </div>	
    </div>
 </div>
 <div class="navbar navbar-inverse navbar-fixed-bottom">
	<div class = "container">
		<div class="social">
		   <a class="pull-left icon" href="#" data-icon = "f"></a>
		   <a class="pull-left icon" href="#"  data-icon = "i"></a>
		</div>
	</div>
</div>	
</body>
</html>

4 个答案:

答案 0 :(得分：1)

我会这样做的：

nav {
  width: 100%;
}
.img-holder {  
  width: 50px;
  height: 50px;
  margin: 0 auto;
  background-color: red;
  position: relative;
}
ul,li {margin:0;padding:0;}
ul {
  width: 304px;
  position: absolute;
  top: 20px;
}
li {
  width: 150px;
  text-align: center;
  float: left;
  display: inline-block;
  border: 1px solid #d8d8d8;
}
.left-ul {
  left: 50%;
  margin-left: -350px;
}
.right-ul {
  right: 50%;
  margin-right: -350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="img-wrapper">
  <ul class="left-ul">
     <li>ABOUT</li>
    <li>PRODUCT</li>
  </ul>
  <div class="img-holder"></div>
  <ul class="right-ul">
     <li>BLOG</li>
    <li>CONTACT</li>
  </ul>
</div>
</nav>

答案 1 :(得分：0)

我自己没有尝试过，但您可以尝试使用输入组课程：bootstrap: align input with button。

通常，如果您知道块元素的高度，如果将其线高设置为该高度，您将获得一条在该空间中垂直居中的线;只要注意两行或更多行的物品，然后就会中断。

答案 2 :(得分：0)

您需要对CSS和HTML进行一些更改。

HTML-wise，制作所有项目（包括图片），navbar li项，然后移除left和right导航栏类。

然后，您需要将navbar使用处于未展开状态，方法是在父级上应用text-align并使用以下方式解开孩子：

@media (min-width: 768px) {
    .navbar .navbar-collapse {
        text-align: center;
    }
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }    
}

Demo Fiddle 

.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  margin: auto;
  height: 30px;
}
.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}
.navbar-brand > img {
  display: inline-block;
  margin: auto;
}
@media (min-width: 768px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
  }
}
.navbar .divider-vertical {
  height: 50px;
  margin: 0 9px;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #f2f2f2;
}
.navbar-inverse .divider-vertical {
  border-right-color: #222222;
  border-left-color: #111111;
}
@media (max-width: 767px) {
  .navbar-collapse .nav > .divider-vertical {
    display: none;
  }
}
@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
  .navbar .navbar-collapse {
    text-align: center;
  }
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">	<span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button>
    <div class="collapse navbar-collapse navHeaderCollapse ">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>

        </li>
        <li class="divider-vertical"></li>
        <li><a href="#">Product</a>

        </li>
        <li>
          <a href="#" class="navbar-brand">
            <img src="image/nav_logo.png" />
          </a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li class="divider-vertical"></li>
        <li><a href="#">Contact</a>

        </li>
      </ul>
    </div>
  </div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container">
    <div class="social">
      <a class="pull-left icon" href="#" data-icon="f"></a>
      <a class="pull-left icon" href="#" data-icon="i"></a>

    </div>
  </div>
</div>

答案 3 :(得分：0)

只需将此添加到您的css

即可 
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    max-width: 480px; /**change the max width to what ever you want you can add it in media query too*/
    margin: 0 auto;  /**center the menu*/
}

live Demo

相关问题
最新问题