行数の 12 列制限を破るための Bootstrap 3 のカスタマイズ

問題

デフォルトでは、Bootstrap 3 は 12 単位を超える列を強制的にスタックします「float: none」動作のため、垂直方向に。この制限により、複数のコンテンツ ブロックを 1 つの行に追加できる動的レイアウトが妨げられる可能性があります。

解決策

この制限を破るために、カスタム CSS オーバーライドを適用してブートストラップの動作をオーバーライドし、行が対応できるようにすることができます。 12列以上。方法は次のとおりです:

/* col-xs float fix for large column groups */
.large-group .col-xs-12 {
  float: left;
}

/* col-sm float fix for large column groups */
@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

/* col-md float fix for large column groups */
@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

/* col-lg float fix for large column groups */
@media (min-width: 1200px) {
  .large-group .col-lg-12 {
    float: left;
  }
}

実装例

  

    
col 9
    
col 3
    
col 12
  

合理化

ブートストラップのデフォルトの動作では、行の視覚的な一貫性が確保されますが、動的なレイアウトやスペースに制約のあるレイアウトには必ずしも適しているとは限りません。このカスタマイズにより、そのような状況での柔軟性と応答性が向上します。