2

この jsFiddle をご覧ください: http://jsfiddle.net/arasbm/c8MBg/2/これは、 Twitter のブートストラップの足場の例に基づいて作成しました。

<div class="span9 scroll-sucker">
<div class="row show-grid">
    <div title="" data-original-title="" class="span1">1</div>
    <div title="" data-original-title="" class="span1">1</div>
    <div title="" data-original-title="" class="span1">1</div>
    <div title="" data-original-title="" class="span1">1</div>
    <div title="" data-original-title="" class="span1">1</div>
    <div title="" data-original-title="" class="span1">1</div>
    <div title="" data-original-title="" class="span1">1</div>
    <div title="" data-original-title="" class="span1">1</div>
    <div title="" data-original-title="" class="span1">1</div>
</div>
<div class="row show-grid">
    <div title="" data-original-title="" class="span4">4</div>
    <div title="" data-original-title="" class="span5">5</div>
</div>
<div class="row show-grid">
    <div title="" data-original-title="" class="span9">9</div>
</div>
</div>

コンテンツの応答性を維持しながら、Twitter ブートストラップ グリッド システムを使用して、UI にコンポーネントをレイアウトしようとしています。グリッド コンテナがスクロールバーを取得すると、問題が発生します。たとえば、この場合、サイズ 9 のコンテナーは、スクロールバーがない場合に、期待どおりに 9 X span1 div を行に収めることができます。ただし、(任意のデスクトップ ブラウザーで) 垂直スクロールバーがある場合、1 行に 8 x span1 div しか収まりません。

.scroll-sucker {
  overflow: scroll;   
}

ここに画像の説明を入力

スクロールバーのサイズを説明するためのさまざまなハッキーな方法を考えることができますが、この問題に対処するためのブートストラップの方法または推奨される方法は何ですか?

4

1 に答える 1

2

これを行うための標準的な「ブートストラップの方法」はないと思います...ブートストラップが提供する応答性は、ウィンドウを小さくするときにスパン要素のサイズを変更し、ウィンドウが非常に狭くなると、それらすべてをスタックします垂直に。スパンにスクロールバーを追加することを念頭に置いて構築されたとは思いません。

スパンにスクロールバーがある理由が気になります。あなたの例では、スパンの周りに div を作成し、その上にスクロール バーを配置すると、おそらく期待どおりに動作します。更新された jsfiddle は次のとおりです: http://jsfiddle.net/c8MBg/5/ 

<div class="scroll-sucker">
<div class="span9 ">
<div class="row show-grid">
    stuff....
</div>
</div>
</div>

編集も通常、span{#}要素は常にrow要素内にあります。また、結論として、標準的な方法はないと思います。これが本当に必要なものである場合は、それを機能させる必要があります...（ハックかもしれません）

于 2013-04-17T05:30:56.953 に答える