ブートストラップ4 navbarが上に倒れた

Question

私はこのウェブサイトを構築しています：http://test.ddavo.meと大規模なメディアクエリでもブートストラップナビバーが折りたたまれている理由はわかりません。また、私は.bg-inverseで背景を設定できません。 Btw：navbar-inverseは変更されていないため、トグルラは表示されません。

Answer 1

あなたのコードを見ました。 .navbar-toggleable-mdのようにBootstrap 4 alphaクラスを使用しているようですが、ベータ版のCSSが含まれています。 beta versionに固執することをお勧めします。これは多くの改良点があり、今後のバージョンではこれに基づいて構築されるためです。

あなたのnavbarから.navbar-expand-Xクラスがありません。 Xは、ナビゲーションバーがどの画面で展開されるべきかを示す "ブートストラップ"を打ち明けるべきである。このクラスはrequiredです：

Navbarsは、応答性の崩壊と配色クラスの.navbar-expand{-sm|-md|-lg|-xl}でラッピング.navbarが必要です。

ので.navbar-toggleable-mdクラスを削除して.navbar-expand-mdクラスを追加します。

<nav class="navbar navbar-expand-md bg-inverse bg-faded fixed-top" style="background-color: #212121"> 
    ... 
</nav> 

また、何.bg-inverseクラスはブートストラップ4ベータ版ではありません。 These are可能な背景色クラス：

.bg-primary 
.bg-secondary 
.bg-success 
.bg-danger 
.bg-warning 
.bg-info 
.bg-light 
.bg-dark 
.bg-white 

Answer 2

あなたの現在のマークアップを引き続き使用したい場合は、ブートストラップの正しいバージョンをターゲットにする必要があります。あなたのコードはBootstrap 4のベータ版をターゲットにしていますが、マークアップはAlpha.6のクラスを使用しています。ベータに関連するスクリプトやリンクを取り出し、プロジェクトに次のコードを含めると、コードは期待どおりに機能します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 

ここにあなたのコードは、あなたのポストに[MCVE]を記載してくださいブートストラップ4.