引導導航丸未正常工作使用Flexbox的證明內容spected：空間之間的財產

Question

我試圖用引導」 NAV-丸成分與實現Flexbox的justify-content:space-between： 這裏是我得到的結果是：

，而我預計：

下面是代碼：http://jsbin.com/qihekuteze

Answer 1

這是因爲Bootstrap的clearfix發生的。有::before和::after psuedo元素被添加，也計算爲flexbox的子元素。

如果添加：

.nav::before, 
.nav::after { 
    display: none; 
} 

，並確保它仍然justify-content: space-between;，那麼它會解決它。

新賓：http://jsbin.com/zipigociqi/1/

Answer 2

所以擺弄之後發行了相當數量的是content: " "是引導適用於:before和:after風格的導航類。所以你的CSS應該是：

.nav::after, 
.nav::before { 
    display: none; 
}