Bootstrap 4導航欄在更高的位置折疊

Question

我正在構建這個網站： http ： //test.ddavo.me ，我不知道為什么即使在大型媒體查詢中引導導航欄也會崩潰。 另外，我無法使用.bg-inverse設置背景。 順便說一句：你看不到切換器，因為navbar-inverse似乎沒有改變它。

Answer 1

我查看了你的代碼。 您似乎正在使用Bootstrap 4 alpha類，例如.navbar-toggleable-md ，但您包含了測試版CSS。 我建議你堅持使用測試版 ，因為它有很多改進，而且還有其他版本。

您缺少.navbar-expand-X類。 X應該是一個“告訴”Bootstrap的斷點，導航欄應該在哪個屏幕上展開。 這個課是必需的 ：

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>

此外，Bootstrap 4 beta中沒有.bg-inverse類。 這些是可用的背景顏色類：

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

Answer 2

如果要繼續使用當前標記，則需要定位正確版本的Bootstrap。 您的代碼的目標是Bootstrap 4的Beta版本，但您的標記使用的是Alpha.6中的類。 如果您刪除了與Beta相關的腳本和鏈接，並在項目中包含以下內容，那么您的代碼將按預期工作。

<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>

這是使用正確版本的Boostrap 4的代碼。