0

私の問題をほぼ解決するソリューションをここに実装しましたが、ナビゲーションバーに隣接する要素だけでなく、ナビゲーションバー全体の中央に配置する必要があります(私の場合)。<ul class="nav"><a class="brand"><p class="navbar-text pull-right">

重要: navbar をデフォルトの代わりにカスタマイズしました。独自の背景色などがあるため、他の要素の中央に配置して「下」に表示する必要があります。96px40px<ul class="nav">

これまでの私のコードは次のとおりです。

<div class="navbar navbar-inverse navbar-fixed-top center">
    <div class="navbar-inner">
        <div class="container-fluid">
            <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>
            <a class="brand" href="/home"><img src="http://jayeshcp.files.wordpress.com/2013/03/twitter-bootstrap.jpg" style="width:400px;height:60px;" /></a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                </ul>
                <p class="navbar-text pull-right">
                    <input class="span2" type="text" placeholder="Email">
                    <input class="span2" type="password" placeholder="Password">
                </p>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>

追加した追加のクラスに注意してくださいcenter。これは、リンク先のソリューションからのものです。次のようになります。

.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align:center;
}

.center .dropdown-menu {
    text-align: left;
}

ulBootstrap の他のすべてを壊すことなく、を中央に配置し、上のパディングを与えるにはどうすればよいですか? 別の通貨があれば、報奨金以上のものを提供できます!

編集: jsfiddle はこちらです (参照するのではなく、縮小された css ファイル全体 (カスタマイズされた navbar の高さ) を貼り付けました。申し訳ありません。その下に他のカスタマイズがあります。)

4

1 に答える 1

0 
p.navbar-text
{
    float: none;
    position: relative;
    text-align: right;
}
.navbar .nav
{
    display:block !important;
    float: right !important;
    width: 100%;
}

jsfiddle: http://jsfiddle.net/C7LWm/103/

以下の代わりに下に配置するための解決策は次のとおりです。

.navbar .nav
{
   position: absolute;
   left:0;
   right:0;
   width: 100%;
   background-color:yellow;
}
p.navbar-text
{
   width: 440px;
   text-align:right;
   position:relative;
   z-index:2
}
.navbar .brand 
{ 
   position: relative; 
   z-index:2; 
   padding: 0; 
   width: 30%;
   height: 60px;
   background-image: url('http://placehold.it/400x60&text=Your Logo Here');
   background-repeat: no-repeat; background-size: contain;
   margin: 18px 0;
   background-position: center left
}
.navbar .brand img
{
   display:none;
}

Jsfiddle: http://jsfiddle.net/C7LWm/109/

于 2013-07-03T17:26:27.620 に答える