サイズ変更時にブートストラップ3グリッドが正常に動作しない

Question

次のコードは特定の解像度でうまく動作しますが、ブラウザを押し下げるとcol-xs-1が次の行にプッシュされます。このコードはとても簡単でシンプルですが、ここで何が間違っているのか分かりません。

bootstrap幅の割合がわずかにずれているようです。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-3"> 
     3 
     </div> 
     <div class="col-xs-8"> 
     8 
     </div> 
     <div class="col-xs-1"> 
     1 
     </div> 
    </div> 
</div> 

JSFiddle

Answer 1

問題がパディングです。

ブートストラップはレイアウト設定を使用していることを前提としています。 Navbarやその他の要素にはデフォルトのパディングがあり、すべてが整列しています。私はあなたの例を幾分固定しました。

https://jsbin.com/komevecaho/edit?html,output

また、このSO質問が明確に物事を助けるかもしれない：Remove padding from columns in Bootstrap 3

あなたのフィドルに私はbootstrap.jsもjquery.jsはので、私はjsbinを書いて見ることができませんでした