减少bootstrap

Question

我遇到了这个问题，我试图减少只有大屏幕的列长度。对于大屏幕，我有我的div类：

<div class="col-lg-2 col-md-3 col-sm-3 col-xs-3" style="vertical-align: middle;>Selected Fields</div>

但是在大​​屏幕上（当col-lg-2取得先例时），似乎单词Selected Fields的间距太大了。当我们处理大屏幕时，有什么方法可以“硬编码”列的大小？这是它看起来的一个例子，其中“选定字段”图像右侧的间距是罪魁祸首。

正如我们所看到的，所选字段与帐户：帐户余额图像的距离非常远。看起来只有大屏幕才能解决这个问题。我尝试按照以下链接：https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-still-might-not-know这是我能找到的壁橱，并在样式标记中添加padding-right:0;和padding-left:0;，但似乎没有修复任何内容：只会更改连续填充。任何帮助将非常感激。谢谢！

Answer 1

这更像是一个管家小费，因为Nenad已经回答了这个问题，但是将来可能会节省你一些时间，并且保持你的标记更加简洁。

Bootstrap列大小向上工作，这意味着如果不改变每个断点，则无需重复列大小。

这意味着您的div列类：

<div class="col-lg-2 col-md-3 col-sm-3 col-xs-3">...</div>

可缩短为：

<div class="col-lg-2 col-xs-3">...</div>

col-md和col-sm从col-xs继承它们的大小。

您还忘记关闭样式标记：

... style="vertical-align: middle;">

Answer 2

如果您创建了一个

，请将此css写在css文件末尾或单独的queries.css文件中

@media (min-width: 1200px) { //Here you specify on what device width you want this css to apply. So this will be applied on >1200 width
  .yourDiv {
      width: 150px; //You will write your own data here of course :)
  }
}