Question

希望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;  
 }

Answer 1

首先，将.brand类移到容器内。如果您的品牌形象的高度为80px，则在课程'.navbar .nav > li > a的顶部和底部添加30px填充。删除您为.navbar，.navbar-inner类提供的所有其他填充，高度和边距。

这是更新的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>

希望它有所帮助。

Bootstrap Responsive Navbar 2.3 - 如何垂直对齐徽标和链接

1 个答案: