Question

我已制作了自己的标题和引导导航条，这是我的代码： http://jsfiddle.net/mokujin/fr5601sg/4/ 你看到导航栏在徽标上方，我必须使用什么css属性？谢谢：D

Answer 1

我不知道您希望徽标在导航栏上方或者是什么？

<!-- Fixed navbar -->
    <nav class="navbar navbar-default 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" href="#"><img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/en/3/35/Starbucks_Coffee_Logo.svg"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

这是小提琴 http://jsfiddle.net/fr5601sg/5/

Answer 2

您可以尝试以下各项：

使导航栏看得有点如下;

＆＃13;

.header-navbar {
    margin-top: -75px;
    opacity: 0.6;
}

＆＃13;

在导航栏中包含徽标 - 典型图案：

＆＃13;

.logo {
  margin-left: 20px;
}

＆＃13;

<div id="header" class="header">
  <div class="row">
    <div class="col-xs-12">
      <div class="header-navbar">
        <nav class="navbar navbar-default" role="navigation">
          <a href="./">
            <img class="logo pull-left" src="http://upload.wikimedia.org/wikipedia/en/3/35/Starbucks_Coffee_Logo.svg"/>
          </a>
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>

          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </nav>
      </div>
    </div>
  </div>
 </div>

＆＃13;

修改导航栏，使其始终显示在屏幕顶部，无论您滚动的页面有多远：

＆＃13;

#logo {
    margin-top: 50px;       
}

.header-navbar {
    width: 100%;
    top: 0;
    position: fixed;
}

＆＃13;

<div id="logo" class="row">
    <div class="col-xs-12">
        <div class="header">

            <a href="./"><img src="http://upload.wikimedia.org/wikipedia/en/3/35/Starbucks_Coffee_Logo.svg"></a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="header-navbar">
            <nav class="navbar navbar-default" role="navigation">

                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">

                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </nav>
        </div>
    </div>
</div>

＆＃13;

徽标Bootstrap导航栏

2 个答案: