Question

<body>
<nav class="navbar navbar-fixed-top" role="navigation">
  <div class="navbar-inner" style="position: center;">
  <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Cottages</a></li>
  </ul><a class="navbar-brand" href="#"><img src="http://placehold.it/150x150"></a>
   <ul class="nav navbar-nav">
    <li><a href="#">Attractions</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  </div>
</nav>

这是我的代码。我试图将品牌放在“小屋”和“景点”链接之间，并在保持布局响应的同时水平居中。另外，我希望品牌在导航栏外垂直延伸（不改变导航栏的高度而存在）。如果有更好的方法（而不是我现在的HTML），请告诉我！谢谢。

编辑：这是我当前代码的JSFiddle。虽然我必须说我的浏览器中的代码结果不同......

Answer 1

使用包装类：

#wrapper { 
  margin:0 auto; 
  width:500px;
}

像这样申请。

<div id="wrapper">
   <nav> </nav> 
</div>

如果你需要根据视口调整特定大小的大小，你可能需要使用css @media Queries来根据特定的宽度改变css。

如何在bootstrap 3导航栏中的2个列表之间放置和居中徽标？

1 个答案: