Twitter bootstrap 无论屏幕大小如何，引导列跨度

在bootstrap中，我们可以根据屏幕大小使用

.col xs-*

，

.col sm-*

，

.col md-*

，

.col lg-*

来跨越

*

列

我正在寻找一个css类，它允许我跨越

*

列，而不管屏幕大小。比如：

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

---

它不是最优的，因为有很多重复项

在bootstrap 3中，您应该能够仅使用

col-xs-5

• 请参见此演示

解释 如果查看bootstrap 3代码（认为它们在bootstrap 4 alpha中发生了更改），它们不会将媒体查询应用于

xs

列，因此在视口宽度更改时不会更改

xs

类

e、 g.他们设置列定义

col基本样式 告诉

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 3中，您应该可以只使用

col-xs-5

来实现。您尝试过吗？是的，这应该是首先实现移动的方法

.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;
}

.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;
}