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

Bootstrap 3 hidden-xs使行更窄

2 个答案: