jquery - Bootstrap - 响应式 Logo 、菜单和导航栏

Question

我是菜鸟，这是我第一次真正体验 Bootstrap。我一直试图将我的 Logo 放在导航栏中的左侧，并与导航栏切换类中的下 zipper 接对齐。我附上了我最终尝试做/复制的内容的屏幕截图，因为展示它比我尝试和描述它更容易。

在移动设备上查看时，菜单会变成下拉菜单并移至较大的 Logo 下方。

我想用作引用的站点是 http://www.fidelityhome.net

我一直在通过给定最大宽度和最大高度以及自动来调整大小，我尝试将 Logo 移出导航栏标题，甚至移出容器。

<div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" 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="large-4 columns centered-text-responsive"> <div class="logo-container"><a href="index.html"><img src="images/logo3.png" alt="logo"
                    style="max-width:600px; max-height:200px; width:100%;" /></a>
            </div>

Answer 1

你的html结构应该是这样的，

<div class="navbar navbar-default navbar-fixed-top">
            <div class="container">
               <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>
                  <a class="navbar-brand" href="#" class="logo"><img src="assets/logo.png" alt=""></a>
              </div>
              <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav pull-right">
                  <li class=""><a href="#">1</a></li>
                  <li><a href="#">Menu</a></li>
              </ul>
         </div>
    </div>
</div>

希望对您有所帮助。