0

希望 Bootstrap导航栏中的徽标和链接垂直居中对齐。

快到了。以下代码导致徽标与导航栏底部对齐，并且链接垂直居中对齐。我认为这与 LESS 和品牌有关，clearfix 类当然我在编译的 css 中看不到。我已经搜索过，许多答案似乎很接近，但还没有真正的答案。

        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner clearfix">
                <a class="brand" href="#"><img class="logo" src="img/mylogo.png"></a> 
                <div class="container">

                   <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                    </a>

                    <div class="nav-collapse collapse">
                        <ul class="nav pull-right">
                            <li>
                                <a class="nav-text" href="#about">About</a>
                            </li>
                            <li>
                                <a class="nav-text" href="#pricing">Pricing</a>
                            </li>
                            <li>
                                <a class="nav-text" href="/blog">Blog</a>
                            </li>
                            <li>
                                <a class="nav-text" href="https://mysite.com">Support</a>
                            </li>
                            <li>
                                <a class="nav-text" href="/settings">Settings</a>
                            </li>
                            <li>
                                <a class="nav-text" data-toggle="modal" href="#myModal">
                                    </i>Login</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

CSS是：

root { 
    display: block;
}
/* add style here */
 body {
   padding-left: 0;
   padding-right: 0;
 }
 .navbar {
   height: 60px;
   opacity:0.8;
 }
 .navbar .navbar-inner {
   background: #ffffff;
   border: none;
   -moz-box-shadow: 0px 3px 2px 0px #333333, 0px 1px 10px 0px rgba(0, 0, 0, 0.0980392);
   -webkit-box-shadow: 0px 3px 2px 0px #333333, 0px 1px 10px 0px rgba(0, 0, 0, 0.0980392);
   -o-box-shadow: 0px 3px 2px 0px #333333, 0px 1px 10px 0px rgba(0, 0, 0, 0.0980392);
   box-shadow: 0px 3px 2px 0px #333333, 0px 1px 10px 0px rgba(0, 0, 0, 0.0980392);
   height: 60px;
   padding-left: 20px;
   padding-right: 20px;
   padding-top:10px;


 }
 .navbar .navbar-inner .responsive-container {


 }
 .nav-text {     
   font-family:"open sans";
   font-size: 16px;
   font-weight: bold;
   color: #000000;  
 }
4

1 回答 1

1

First of all, move the .brand class inside container. If your brand image has 80px height, then give 30px padding to the top and bottom of the class '.navbar .nav > li > a. Remove all other paddings, heights and margins that you have given to .navbar, .navbar-inner classes.

Here is the updated bootply http://bootply.com/63025

CSS:

/* add style here */
 body {
   padding-left: 0;
   padding-right: 0;
 }
 .navbar {
   opacity:0.8;
 }
 .navbar .navbar-inner {
   background: #ffffff;
   border: none;
   -moz-box-shadow: 0px 3px 2px 0px #333333, 0px 1px 10px 0px rgba(0, 0, 0, 0.0980392);
   -webkit-box-shadow: 0px 3px 2px 0px #333333, 0px 1px 10px 0px rgba(0, 0, 0, 0.0980392);
   -o-box-shadow: 0px 3px 2px 0px #333333, 0px 1px 10px 0px rgba(0, 0, 0, 0.0980392);
   box-shadow: 0px 3px 2px 0px #333333, 0px 1px 10px 0px rgba(0, 0, 0, 0.0980392);


 }
.navbar .nav > li > a {
      padding:30px 10px 30px
    }

HTML:

            <div class="container">
            <a class="brand" href="#"><img class="logo" src="img/mylogo.png"></a> 
               <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                </a>

                <div class="nav-collapse collapse">
                    <ul class="nav pull-right">
                        <li>
                            <a href="#about">About</a>
                        </li>
                        <li>
                            <a href="#pricing">Pricing</a>
                        </li>
                        <li>
                            <a href="/blog">Blog</a>
                        </li>
                        <li>
                            <a href="https://mysite.com">Support</a>
                        </li>
                        <li>
                            <a href="/settings">Settings</a>
                        </li>
                        <li>
                            <a data-toggle="modal" href="#myModal">
                                Login</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

Hope it helps.

于 2013-06-03T13:38:11.407 回答