Bootstrap HTML回車

Question

經過一個小時的隔離問題，我可以發佈這:) :)我有一個本地文件的問題，但不是在生產中。唯一的區別是在製作時，html文件是內聯的。

我使用的是默認的引導3.3.5這個CSS類：

<style> 
    .v-center { 
     display: inline-block; 
     float: none; 
    } 
</style> 

我的問題是，我沒有相同的結果與兩個代碼：

代碼1：

<div class="row"> 
    <div class="col-md-4 v-center"> 
     col-md-4 
    </div><div class="col-md-8 v-center"> 
     col-md-8 
    </div> 
</div> 

代碼2：

<div class="row"> 
    <div class="col-md-4 v-center"> 
     col-md-4 
    </div> 
    <div class="col-md-8 v-center"> 
     col-md-8 
    </div> 
</div> 

你可以在這裏發現了兩個例子：

http://relationeo.com/test.html

http://relationeo.com/test2.html

該錯誤是發生時窗口是> 990px​​。

爲什麼回車符會打斷？

謝謝

Answer 1

問題是你的CSS類「V-中心」。它將顯示設置爲inline-block。與inline-block白色空間進場（至少是空白的第一個字符，反正）。正如你所期望的：

Just 
Testing 

被渲染爲Just Testing，而不是JustTesting，同樣適用於inline或inline-block的元素。

總而言之，如果您希望獲得一致的結果，請不要混淆Bootstrap網格。如果您需要申請其他課程，請在以內的以內，而不是在同一個div上。例如：

<div class="col-md-8"> <!-- this is grid div, so no other classes here --> 
    <div class="v-center"> 
     ... 
    </div> 
</div>