ソーシャルアイコンを右に引くと、ロゴと同じ高さに置かれるのではなく、中心のロゴが少し押し下げられます(つまり、ロゴより上に余分な空白を作成します)中央のロゴを使用するときにソーシャルアイコンを右に引く方法navbarのブートストラップ
私は左に浮かべて絶対的な位置を作るようにしましたが運がありません。
誰かが画面の右上に表示されるように手伝ってもらえますか?余分なスペースはありませんか?ここで
は、社会的アイコンとナビゲーションバーのために私のコードです:
HTML
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li><a href="#">About Us</a></li>
<li><a href="#">Our Cars</a></li>
<a href="#"><img id="logo-navbar-middle" src="../assets/images/logo.png" width="250" alt="logo"></a>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right pull-right">
<li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a> </li>
<li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS
#navbar-primary .navbar-nav {
background: #fff;
width: 100%;
text-align: center;
li {
display: inline-block;
float: none;
a {
padding-left: 30px;
padding-right: 30px;
padding-top:10px;
}
}
}
.social {
margin: 0;
padding: 0;
}
.social ul {
margin: 0;
padding: 5px;
}
.social ul li {
margin: 5px;
list-style: none outside none;
display: inline-block;
}
感謝すべてのヘルプ、私は多くのために、この上で立ち往生されています日
ありがとう!
このスクリーンショットのようにしたいですか? http://imgur.com/a/xpnHn – IamFaysal
はい、ただし、ロゴとナビゲーションリンクはすべて中央に位置しています – ck777
私は別のウェブサイトのスクリーンショットが好きでしたが、それは問題ありませんでしたが、リンクは中心に置かれているように見えますが、ロゴの上に置かれているように見えます。 – ck777