我使用的是Twitter的Bootstrap 3.0,无法终生了解如何在导航栏中定位品牌形象。

http://jsbin.com/efagoj/99/edit?html,output

<div class="navbar navbar-fixed-top" style="background-color: orange;">
  <a class="btn btn-navbar pull-left">Left Text</a>
  <a class="btn btn-navbar pull-left">Left Text 2</a>
  <div class="navbar-inner">
    <div class="container-fluid" style="text-align: center;">
      <a class="brand" href="#" style="margin:0 auto; float: none;">
        <img src="http://i.imgur.com/XlPrrVD.png" style="height:30px;">
      </a>
    </div>
  </div>
  <a class="btn btn-navbar pull-right">Right Text</a>
</div>


我希望品牌形象无论如何都可以保持居中地位-即使双方都有多个联系。

最佳答案

我认为这种解决方案可能比将其从页面流程中删除更为可接受。因此,如果您有两个浮动容器,一个在左侧,一个在右侧,两个容器的宽度均相等,则应正确放置中心的div以便居中。

http://jsbin.com/efagoj/116/edit

但是,这需要页面上足够的宽度才能正确显示。另外,如果要更改导航栏,则必须确保左右两侧的宽度始终相同...因此,@ media查询的绝对位置可能对您更好。

10-05 20:44
查看更多