Bootstrap 3 hidden-xs macht die Zeile schmaler

Ich experimentiere mit Bootstrap 3 responsive grids und versuche eine Spalte verschwinden aus einer Zeile, wenn der Bildschirm klein ist. Ich kann mit der Spalte zu verschwinden, sondern die ganze Reihe scheint es enger als das Ergebnis.

Hier ist mein code, der mir Kummer:

<div class="container">
 <div class="row">
  <div class="col-xs-4 col-sm-2 col-md-1" align="center">
   Col1
  </div>
  <div class="col-xs-4 col-sm-2" align="center">
   Col2
  </div>
  <div class="col-xs-12 hidden-xs col-sm-6 col-md-5" align="center">
   Col3
  </div>
  <div class="col-xs-12 hidden-xs col-sm-12 hidden-sm col-md-3 " align="center">
   Col4
  </div>
  <div class="col-xs-4 col-sm-2 col-md-1" align="center">
   Col5
  </div>
 </div>
</div>

Den Spalten Col4 und dann Col3 verschwinden, sobald der Bildschirm kleiner wird, aber die Zeile schmaler auf jede Entfernung (im Vergleich zu einer header-Zeile, die Zeile nicht ändern). Ich verstehe nicht, warum als ich haben Sie sicher, dass alle Blöcke bis zu einer Breite von 12 für jede Phase des Prozesses. Ich dachte, dass vielleicht der col-xs-12 war das problem, sondern das entfernen dieser Stoppt die Spalte, die entfernt wird, und stellt die entfernte Spalte mit Col5!

Ich bin natürlich fehlt 'etwas', aber ich kann nichts finden, überall, um mir zu helfen - hoffentlich
Ich finde die Erleuchtung hier.

InformationsquelleAutor der Frage branty1970 | 2013-11-14