0

からbootstrap-responsive.cssリンクを削除しました<head>が、ページはまだレスポンシブです。3 つ<div class"row">の があり、それぞれにデータを保持するためのツリー<div class="span4">があり、すべてが 3x3 の正方形のように見えます。私の解像度は 1600x872 で、「正方形」は完璧に見えますが、ブラウザー ウィンドウのサイズを変更すると、div が狂ってしまい、長方形のように見えます。つまり、ウィンドウのサイズを変更すると、スクロールバーが表示されます。解決策はありますか？

4

1 に答える 1

2

.container行をdiv内にラップしていますか?

を使用しない場合、画面の幅を縮小すると、行内.containerの.span4要素によって「長方形」効果が得られます。

この jsbin の例でテストできます。一番上の行は で囲まれていません.containerが、一番下の行は です。

http://jsbin.com/okogis/1

http://jsbin.com/okogis/1/edit

       <!-- this row has no .container, and will 
look like a rectangle when you reduce screen width -->
       <h4>NO .container</h4>  
        <div class="row">
          <div class="span4">
            <div class="spacer200 a1"></div>
          </div>
            <div class="span4">
             <div class="spacer200 a2"></div>
          </div>
            <div class="span4">
              <div class="spacer200 a3"></div>
          </div>
        </div>  

          <div class="spacer50"></div> 

        <!-- this row does have a .container, 
             and will not give the rectangle effect -->
        <div class="container">
          <h4>.container wrapping the row</h4>  
          <div class="row">
            <div class="span4">
              <div class="spacer200 a1"></div>
            </div>
              <div class="span4">
               <div class="spacer200 a2"></div>
            </div>
              <div class="span4">
                <div class="spacer200 a3"></div>
            </div>
          </div> 
        </div>
于 2012-09-02T13:14:31.730 に答える