[Bootstrap] 複数カラムにまとめてスタイルを適用

Twitter Bootstrapで複数カラムにまとめてスタイルを適用する方法のメモです。

例えばBootstrapでは、カラムの左右にpaddingが15pxと設定されています。これを変更したい場合、カラムに直接padding-left:0;padding-right:0;を設定する場合は問題がないのですが、そのカラムを包む<div class='row'>にpaddingを設定しても、内側のdivには適用されません。

そこでCSS3の属性セレクタを利用したクラスを用意することにします。

.padding0 > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

このクラスをカラムのラッパーに設定すると、まとめてスタイルを適用できるようになります。

<div class='row padding0'>
  <div class="col-xs-4"><a href='#' class='w100p btn btn-primary'>TEST</a></div>
  <div class="col-xs-4"><a href='#' class='w100p btn btn-primary'>TEST</a></div>
  <div class="col-xs-4"><a href='#' class='w100p btn btn-primary'>TEST</a></div>
</div>

以下はデモとソースです。

<div class="row">
  <div class="col-xs-4"><a href='' class='w100p btn btn-primary'>TEST</a></div>
  <div class="col-xs-4"><a href='' class='w100p btn btn-primary'>TEST</a></div>
  <div class="col-xs-4"><a href='' class='w100p btn btn-primary'>TEST</a></div>
</div>

<style>
  .demo-class > [class*='col-'] {
    padding-right:0;
    padding-left:0;
  }
</style>

<div class="row demo-class">
  <div class="col-xs-4"><a href='' class='w100p btn btn-primary'>TEST</a></div>
  <div class="col-xs-4"><a href='' class='w100p btn btn-primary'>TEST</a></div>
  <div class="col-xs-4"><a href='' class='w100p btn btn-primary'>TEST</a></div>
</div>