0

サイトのレイアウトにTwitterBootstrapを使用しています。私はすべてrow-fluidの行を使用しており、合計するとすべてのスパンが12になります。しかし、流体グリッドの例のように、div間でコンテンツが「リーク」し、スタックしないという問題が継続的に発生しています。私は<HEAD>提案されたようにこれに含めています。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

例えば：

<div class="row-fluid">
<div class="span8 offset1 categoryLabel" id="category"></div>
<div class="span1 sortby">ALPHABETIC</div>
<div class="span1 sortby">POPULARITY</div>
<div class="span1 sortby">DATE</div>
</div>                                              
<div class="row-fluid">

レイアウトは、より大きな解像度で問題ありません。しかし、ブラウザのサイズを縮小すると、「アルファベット、人気、日付」がすべて互いにブリードし、「アルファベット」のようになります。期待どおりに「スタック」しません。

4

3 に答える 3

0

少なくともあなたの質問では、行をラップするコンテナ div を定義していません。コンテナー div は、ブートストラップの足場の重要な部分であり、欠落している場合、あらゆる種類の奇妙な動作につながります。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span8 offset1 categoryLabel" id="category"></div>
    <div class="span1 sortby">ALPHABETIC</div>
    <div class="span1 sortby">POPULARITY</div>
    <div class="span1 sortby">DATE</div>
  </div><!-- end row -->
  <!-- more rows here -->
</div><!-- end container -->

この流動的な Twitter Bootstrap の例を参照として検査またはダウンロードできます: http://twitter.github.com/bootstrap/examples/fluid.html

于 2013-01-27T19:01:35.190 に答える
0

これは、span1 列の幅が列見出しに対して十分でないためです。テキストを小さくし、列に色を付けたこの例を参照してくださいhttp://jsfiddle.net/panchroma/QKZzZ/ 

body{
font-size:50%;
}
.span1, .span8{
background-color:#ccc;
}

乾杯！

于 2013-01-27T18:58:32.640 に答える
-1

ブートストラップ cdn リンクを 2.2 に更新し、現在は正常に機能しています。

于 2013-01-27T21:49:05.430 に答える