2017-03-07 4 views
2

ブートストラップ3.1.1では、列の順序が逆転しているようです。どうしてこれなの?どのようにして安全にオーバーライドできますか?ブートストラップ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; 
} 

私はちょうど行方不明です。つまり、削除する必要がある場合は、私が上に投稿した浮動小数点数を追加すると、意図せず他の何かを破るか、それとも最善の解決策ですか?

NB:あなたはbootstrap-rtlバージョンを参照しているため

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

答えて

3

:それはブートストラップ3.3.7(最新)の価値がある何のためには、フローティングルールを逆転しているようです。 RTLは "Right To Left"の略です。あなたはそれを修正し、標準バージョンを使用している場合は、それが正常に動作します:

[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>

+1

ああ、良い悲しみを。どうもありがとう。 – 1252748

関連する問題