Question

在bootstrap中，我们可以使用.col-xs-*，.col-sm-*，.col-md-*，.col-lg-*来覆盖*列，具体取决于屏幕尺寸。

我正在寻找一个允许我跨越*列的css类，而不管屏幕大小如何。类似的东西：

<div class="col-all-5">
</div>

使用span*：simple twitter bootstrap fluid layout span5 != span5看起来可以。但我不知道为什么它对我的项目不起作用。是因为它仅适用于bootstrap 2吗？在bootstrap 3中有替代方案吗？

目前，我通过使用所有屏幕尺寸的所有css类来解决问题，它看起来像这样：

<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
</div>

它不是最佳的，因为有很多重复。

Answer 1

在bootstrap 3中，您应该只能使用col-xs-5

来实现

请参阅演示 - http://jsbin.com/foxefudiwi/edit?html,output

解释

如果您查看bootstrap 3代码（认为它们在bootstrap 4 alpha中已更改），则它们不会将媒体查询应用于xs列 - 因此在视口宽度时不要更改xs类变化。

e.g。他们设置了列定义line 1616 in the unminified "dist" CSS

col基本造型

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

告诉xs列并排浮动

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}

之后（我认为）xs列几乎没有了 - 其他列大小获得媒体查询，这些查询会在断点上方改变（基本上失去浮点数）。

无论屏幕大小如何，Bootstrap列跨度

1 个答案:

解释

col基本造型