將徽標放入引導導航欄

Question

我正在嘗試將徽標放到引導導航欄中，現在我明白了。

問題是導航欄在移動設備上斷開，徽標被丟棄，有人知道問題出在哪里以及如何解決？

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                      <div class="container">
                        <div class="navbar-header">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                        </div>
                        <a class="navbar-brand"> <img class="logo-bar" src="http://pubcrawlsp.site44.com/assets/img/logo/logo3.png"></a>
                        <div id="navbar" class="collapse navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="sobre.html">QUEM SOMOS</a></li>
                                <li><a href="faq.html">FAQ</a></li>
                                <li><a href="https://www.facebook.com/pubcrawlsp/photos_stream?ref=ts" target="_blank">FOTOS</a></li>
                                <li><a href="contato.html">CONTATO</a></li>
                                <li class="active-y"><a href="reservar.html">RESERVAR</a></li>
                            </ul>
                        </div><!--/.nav-collapse -->
                      </div>
                    </nav>

示例-> http://jsfiddle.net/d5cyt1wp/

謝謝。

Answer 1

品牌徽標應放在<div class="container"> 。 將它移到div內，因此應解決此問題：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                  <div class="container">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <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"> <img class="logo-bar" src="http://pubcrawlsp.site44.com/assets/img/logo/logo3.png"></a>
                    </div>

                    <div id="navbar" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="sobre.html">QUEM SOMOS</a></li>
                            <li><a href="faq.html">FAQ</a></li>
                            <li><a href="https://www.facebook.com/pubcrawlsp/photos_stream?ref=ts" target="_blank">FOTOS</a></li>
                            <li><a href="contato.html">CONTATO</a></li>
                            <li class="active-y"><a href="reservar.html">RESERVAR</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                  </div>
                </nav>

也可以在這里查看官方文檔

Answer 2

在.navbar-header添加一個pull-right類。 現在，該div占據了整個屏幕的寬度，將徽標向下推到其下方。 更新的提琴： http : //jsfiddle.net/m7acx1v8/

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                      <div class="container">
                        <div class="navbar-header pull-right">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                        </div>
                        <a class="navbar-brand"> <img class="logo-bar" src="http://pubcrawlsp.site44.com/assets/img/logo/logo3.png"></a>
                        <div id="navbar" class="collapse navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="sobre.html">QUEM SOMOS</a></li>
                                <li><a href="faq.html">FAQ</a></li>
                                <li><a href="https://www.facebook.com/pubcrawlsp/photos_stream?ref=ts" target="_blank">FOTOS</a></li>
                                <li><a href="contato.html">CONTATO</a></li>
                                <li class="active-y"><a href="reservar.html">RESERVAR</a></li>
                            </ul>
                        </div><!--/.nav-collapse -->
                      </div>
                    </nav>