0
私は現在、画面が小さくなったときに要素を崩壊させるために、ブートストラップのナビゲーションバーを使用しています。画面が小さくなると崩壊するdivが2つありますが、崩壊する前に要素が重なり合っています。Bootstrap Navigation Bar Collapse
スモールスクリーン：私はここでやってみたい何http://imgur.com/MIrRvNH
は半画面のナビゲーションリンクの前に右のソーシャルメディアのアイコンを崩壊することですが、使用してブートストラップの"hidden-sm"は機能していないようです。私はブートストラップでかなり新しく、これを修正する方法についていくつかアドバイスをしたいと思います。
マイHTML：
<!-- NAVIGATION BAR -->
<div class="navbar navbar-default navbar-static-top navbar-inverse">
<div class="container">
<!-- HOME BRAND -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="./newnewfoy.png">
</a>
</div>
<!-- NAV LINKS -->
<ul class="nav navbar-nav navbar-collapse collapse">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Event</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Volunteer</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Sponsors</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
<!-- NAV MEDIA -->
<div class="nav navbar-collapse collapse medialinks hidden-xs">
<a id="YOUcon" class = "mediacon" href="#"></a>
<a id="IGcon" class = "mediacon" href="#"></a>
<a id="TWTcon" class = "mediacon" href="#"></a>
<a id="FBcon" class="mediacon" href="#"></a>
</div>
</div>
</div>
CSS：
.nav{
height: 50px;
}
.mediacon{
float: right;
}
.medialinks{
float: right;
}
.navbar-brand{
padding-top: 7px;
}
私は、これはナビゲーションリンクの前にソーシャルメディアのアイコンを崩壊とは思わない、それはありませんか？リンクのボタンも作ろうと思っていましたが、ボタンを作ってもこれが起こらないようにしたいと思っていました。 –
あなたのソーシャルアイコンのコードを追加できます – Pete
私はアイコンのために反応したので、彼らは単にjsfiddleに表示されません。私は私の問題を解決しました、ありがとう！ –