0

Bootstrap navbarのロゴとリンクを垂直方向に中央揃えにしたい。

私は近くにいます。次のコードでは、ロゴが navbar の下部に配置され、リンクが垂直方向の中央に配置されます。これは、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

まず、.brandクラスをコンテナ内に移動します。ブランド イメージの高さが 80 ピクセルの場合、クラスの上下に 30 ピクセルのパディングを指定します'.navbar .nav > li > a。.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>

それが役に立てば幸い。

于 2013-06-03T13:38:11.407 に答える