Bootstrap 3 hidden-xs使行更窄

Question

我正在尝试使用Bootstrap 3响应式网格,并且当屏幕尺寸较小时,我试图使列从一行中消失.我可以让列消失,但整行似乎变得更窄了.

这是我的代码让我感到悲伤:

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

随着屏幕变小,列Col4和Col3消失,但每次移除时行变窄(与不变化的标题行行相比).我不明白为什么因为我已确保所有块的每个阶段加起来为12的宽度.我虽然可能col-xs-12可能是问题但是删除它会阻止列被删除并将删除的列放入Col5!

我显然错过了'某事',但我找不到任何可以帮助我的东西 - 希望我能在这里找到启示.

Answer 1

如果你只在Col4使用visible-md,它是如何工作的？你根本使用-lg吗？如果没有,这可能会奏效.

<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="hidden-xs col-sm-6 col-md-5" align="center">
            Col3
        </div>
        <div class="visible-md col-md-3 " align="center">
            Col4
        </div>
        <div class="col-xs-4 col-sm-2 col-md-1" align="center">
            Col5
        </div>
    </div>
</div>