0

ページを 3 つの異なるモジュールで構成しています。左側のナビゲーション、中央の画像、右側のソーシャル サイドバーです。以下は、このコンテンツをフォーマットする css です。ウィンドウのサイズを変更するときに問題が発生します。中央の画像は左側のナビゲーションと重なっており、サイドバーはページの下部に押し込まれ、左側のナビゲーションの最後と重なっています。ナビゲーション モジュール/サイドバーが修正されました。

私はTwitterのブートストラップをベースとして使用しています。

これを引き起こしている原因とこれを修正する方法についてのアイデアはありますか?

CSS

div.sidebar{
    width: 120px;
    position:fixed; 
    top:12%; 
    left:2%;
    overflow-y:auto;
    height:100%;
}

html

 <div class ="container-fluid">
<div class = "row-fluid">
<!-- left navigation div -->
    <div class = "span1" style = "width:120px;">
            <div class = "sidebar" >
            #navigation
            </div>
        </div>
        
<!-- middle images div -->
        <div class = "span8" style = "width: 900px;">
            #lot of images
        </div>

 <!-- social sidebar -->
        <div class = "span2" style = "margin-left: 10px; ">
            #social module with images
        </div>
</div>
</div>

ウィンドウを小さくすると

ここに画像の説明を入力

正常

ここに画像の説明を入力

4

4 に答える 4

2

レスポンシブウェブデザインについて考えたことはありますか？

ツイッターブートストラップを使用していると言いますか？これを見てください：

http://twitter.github.com/bootstrap/scaffolding.html#response

これを頭に追加します

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

HTMLを変更します。

<div class="container-fluid">
 <div class="row-fluid">
   <!-- left navigation div -->
     <div class="span4">
        <div class = "sidebar" >
         #navigation
        </div>
    </div>

    <!-- middle images div -->
     <div class="span6">
        #lot of images
    </div>

     <!-- social sidebar -->
     <div class="span4">
        #social module with images
    </div>
</div>

未検証。また、流体コンテナの大きさは100％ではありません。12の場合、スパンを変更して合計が16になるようにする必要があると思います。

于 2012-12-04T22:10:37.243 に答える
1

私が見るカップルの問題...

  1. 幅を追加することで、「.row-fluid」とフレームワークの目的を完全に無効にしていますか?? グリッド要素 (つまり、.container、.row、.span(x)) へのすべての幅の割り当てを削除し、フレームワークが設計されたとおりに幅を作成するようにします。生成されているものから幅を調整する必要がある場合は、.span(x) のブロック レベル要素 INSIDE に追加します。

  2. スパンの合計は 12 を超えないようにする必要があります。14 あると、最後のラップ アラウンドが確実に作成されます。

于 2012-12-05T03:02:10.480 に答える
0

提案:

1.スタイルのために余分なものをすべて削除し、ブートストラップに任せます!!

2.常に「よく」でdivをテストします

コードを次のように配置します

<div class="container">
 <div class="row" style="margin-top:20px;">
  <div class="col-lg-3 col-sm-12 ">
    <div class="well"></div>
  </div>
  <div class="col-lg-3 col-sm-12 ">
    <div class="well"></div>
  </div>
  <div class="col-lg-3 col-sm-12 ">
    <div class="well"></div>
  </div>
  <div class="col-lg-3 col-sm-12 ">
    <div class="well"></div>
  </div>
</div>

col-lg-* 大型デバイス用 col-xs-* 超小型デバイス用 col-sm-* 小型デバイス用

このように使用すると、必要なものを達成できます

プランカーのデモ

ブラウザのサイズを変更して効果を確認してください

于 2015-11-17T07:34:59.717 に答える
0

インライン幅でスパンをオーバーライドすると、奇妙な動作が発生します。代わりにデフォルトの TBS 足場を使用できますか?

于 2012-12-04T23:17:47.577 に答える