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

Answer 2

.row {
    margin-right: 15px;
}

把它扔进你的 CSS