Sooey

2012-09-03 01:28:19 +0900

Twitter Bootstrap 2.1でAffixを使うと、Affixを適用した要素の大きさ(幅)が無視されてしまうアナタへ。

以下の例のように、Affixを適用した要素に兄弟となる要素(同じ親を持つ要素)が存在しないとそうなっちゃうようです。

<div class="span6">
  <sidebar data-spy="affix">...</sidebar>
</div>

&nbsp;を入れておけば一応回避できます。

<div class="span6">
  <sidebar data-spy="affix">...</sidebar>
  &nbsp;
</div>

しかし、これではあまりにダサいので、Bootstrapのサイトのサンプルに適用されているCSSを覗いてみたところ、

/* prevent column from collapsing when affixing */
.span3 {
  min-height: 1px;
}

というズルい指定がありました。というわけで、data-spy="affix"を指定した要素の親となる要素(span?)にmin-heightを指定しておけばよさそうです。