如何在水平居中的导航链接旁边对齐徽标？

时间：2014-12-06 05:50:52

标签： html css twitter-bootstrap

我在过去几个小时里一直在努力将我的徽标放在响应式导航栏中居中导航链接的右侧。尝试了几十种方法让这个没有任何运气。我保留了Navbar的大部分CSS完整; BootStrap 3.任何帮助都会很大 不胜感激！链接到网站是：

非常感谢！

＆＃13;
＆＃13; 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

  <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="indexalt.html">
      <img src="data2/test5.png" width="61" height="48">
    </a>
    <div class="navbar-text"> <span class="FutureFont">Future Youth <span style="color:#ee1b04; font-size: 16px;">R</span>ecords</span>
    </div>
  </div>
  </div>

  <div id="navbar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li>
        <a href="OurTeam.html">NEWS</a>
      </li>
      <li class="dropdown">
        <a href="AboutUs.html" class="dropdown-toggle">ABOUT US</a>
        <ul class="dropdown-menu">
          <li><a href="OurTeam.html">Our Team</a>
          </li>
          <li><a href="#">Mission</a>
          </li>
          <li><a href="#">Contact</a>
          </li>
        </ul>
      </li>
      <li><a href="#">PROJECTS</a>
      </li>

      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MEDIA</a>
        <ul class="dropdown-menu">
          <li><a href="#">Audio</a>
          </li>
          <li><a href="#">Video</a>
          </li>
          <li><a href="#">Photos</a>
          </li>
          <li><a href="#">Enter Download Code</a>
          </li>
        </ul>
      </li>
      <li><a href="#">DONATE</a>
      </li>

    </ul>
    </span>


    <div class="sociallinks pull-right">
      <a href="">
        <img id="aks" src="data2/FB1.png" width="32" height="32">
      </a>
      <a href="">
        <img id="akst" src="data2/Twitter1.png" width="32" height="32">
      </a>
      <a href="">
        <img id="aksy" src="data2/youtube1.png" width="32" height="32">
      </a>
      </span>
    </div>

  </div>
  <!--/.nav-collapse -->
  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

你的html有未关闭的div，额外的div，错误的类和许多问题。最好按照GetBootstrap.com上的示例来写信并注释并缩进代码。如果您遇到需要帮助的问题，请务必使用干净，有效的html并遵循相关文档。

Bootstrap的.navbar非常具体，它是向左或向右，就是这样。你必须了解CSS和定位等，以改变它。而且你还必须善于使用响应式CSS，并且也能熟练使用Bootstrap CSS。

这不是成品。在这种情况下，导航栏的高度取决于最高的孩子的高度，即徽标。徽标高60像素，顶部和底部有10px填充，链接的第一个孩子的80px线高用于使其居中。否则会有更多的CSS要创建。

enter image description here

DEMO：https://jsbin.com/tupay/1/

https://jsbin.com/tupay/1/edit?html,css,output

<强> HTML： 

<!-- Fixed navbar -->
<nav class="navbar-center navbar-inverse navbar-fixed-top" role="navigation" id="nav">
   <div class="container">
      <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="logo" href="indexalt.html">
      <img src="http://placehold.it/60x60/ffffff/000000&text=LOGO">
      </a>
      <div id="navbar" class="my-collapse collapse">
         <ul class="navbar-center navbar-nav nav">
            <li>
               <a href="OurTeam.html">NEWS</a>
            </li>
            <li class="dropdown">
               <a href="AboutUs.html" class="dropdown-toggle"  data-toggle="dropdown">ABOUT US <span class="caret"></span></a>
               <ul class="dropdown-menu">
                  <li><a href="OurTeam.html">Our Team</a>
                  </li>
                  <li><a href="#">Mission</a>
                  </li>
                  <li><a href="#">Contact</a>
                  </li>
               </ul>
               <!--/.dropdown-menu -->
            </li>
            <li><a href="#">PROJECTS</a></li>
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">MEDIA <span class="caret"></span></a>
               <ul class="dropdown-menu">
                  <li><a href="#">Audio</a>
                  </li>
                  <li><a href="#">Video</a>
                  </li>
                  <li><a href="#">Photos</a>
                  </li>
                  <li><a href="#">Enter Download Code</a>
                  </li>
               </ul>
               <!--/.dropdown-menu -->
            </li>
            <li><a href="#">DONATE</a>
            </li>
         </ul>
         <!-- /ul.navbar-center -->
      </div>
      <!--/.my-collapse collapse -->
      <div class="social-links clearfix">
         <a href="#">
         <img src="http://placehold.it/64x64/ffffff/000000&text=X">
         </a>
         <a href="#">
         <img src="http://placehold.it/64x64/ffffff/000000&text=X">
         </a>
         <a href="#">
         <img src="http://placehold.it/64x64/ffffff/000000&text=X">
         </a>
      </div>
      <!--/.social-links -->
   </div>
   <!--/.container -->
</nav>
<!-- /nav.navbar-center -->

<强> CSS 

nav.navbar-center.navbar-inverse {
    background: #000
}
.navbar-center .social-links a {
    width: 32px;
    height: 32px;
    float: left;
    padding-right: 5px;
}
nav.navbar-center .social-links {
    float: left;
    padding: 27px 0 10px 0;
}
nav.navbar-center img {
    max-width: 100%;
    height: auto;
}
nav.navbar-center .logo {
    float: left;
    padding: 10px 20px 10px 0;
}
.navbar-inverse button.navbar-toggle {
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 10px;
    width: 50px;
    height: 80px;
}
.navbar-inverse button.navbar-toggle .icon-bar {
    width: 100%;
    display: block;
    margin: 5px 0;
    height: 3px;
    border-radius: 0;
    background:#fff;
    border:0px;
    padding: 0;
}
@media (max-width:767px) { 
    nav.navbar-center .my-collapse {
        clear: both;
        padding: 10px 0;
    }
}
@media (min-width:768px) { 
    nav.navbar-center img {
        width: 100%;
        height: auto;
    }
    nav.navbar-center .container {
        text-align: center;
        max-width: 980px;
    }
    #navbar.my-collapse.collapse {
        visibility: visible;
        display: inline-block;
    }
    ul.navbar-center > li > a {
        padding: 0 15px;
        line-height: 80px;
    }
    nav.navbar-center .logo {
        padding: 10px 0 10px 0;
        text-align: left;
        float: left;
    }
    nav.navbar-center .social-links {
        line-height: 80px;
        float: right;
        padding: 0;
    }
}
相关问题
最新问题