html - 为什么 Bootstrap 3.1.1 颠倒列顺序？

Question

在 Bootstrap 3.1.1 中，列顺序似乎颠倒了。为什么是这样？如何安全地覆盖它？

[class^="col"] {
  border: 1px solid;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap-rtl.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-3">col 1</div>
    <div class="col-xs-3">col 2</div>
    <div class="col-xs-3">col 3</div>
    <div class="col-xs-3">col 4</div>    
  </div>
</div>

我首先想到的是添加:

[class^="col"] {
  float: left;
}

然而，如果没有使用 Bootstrap 来故意实现我只是想念的东西，Bootstrap 会附带这种行为似乎很奇怪。也就是说，如果它应该被删除，添加我在上面发布的 float 是否会无意中破坏其他任何东西或者最好的解决方案？

注意:对于它的值(value)，Bootstrap 3.3.7(最新)似乎已经颠倒了 float 规则:

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

Answer 1

因为您引用的是 bootstrap-rtl 版本。 RTL 代表“从右到左”。如果您修复它并使用标准版本，它可以正常工作:

[class^="col"] {
  border: 1px solid;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-3">col 1</div>
    <div class="col-xs-3">col 2</div>
    <div class="col-xs-3">col 3</div>
    <div class="col-xs-3">col 4</div>    
  </div>
</div>