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>

示例 - ＆gt; 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>

另请查看官方文档here

Answer 2

将pull-right课程添加到.navbar-header。现在，该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>

将徽标放在bootstrap导航栏中

2 个答案: