0

私は最近 Bootstrap を使い始めましたが、私が遭遇したこの 1 つの問題を除いて、何の問題もありませんでした。私はそれを使用して自分の個人的なウェブサイトをセットアップし、レスポンシブになるようにスタイルを設定しました。これまでのところ、すべてが見栄えがします.

しかし、私が抱えている問題は、980px から 1200px まで、Bootstrap がページをフルページの行でレンダリングすることです (モバイルの場合とまったく同じように)。私はbootstrap-responsive.minを使用しています私のページ設定は次のとおりです。

 <div class="row-fluid">
      <div class="span3"> <!-- sidebar here --> </div>
      <div class="span8"> <!-- content of each page --> </div>
      <div class="span1"> &nbsp; <!-- empty for spacing --> </div>
 </div>

980px-1200px は、正しくレンダリングされる唯一の間隔であり、これまでのところ、その間隔のメディア クエリはありません。以前にこの問題に遭遇した人はいますか? または、これを引き起こしている可能性があることを誰かが知っていますか?

ここでページの例を見ることができます (ブラウザー ウィンドウのサイズをゆっくりと変更すると気付くでしょう): http://portfolio.jrstrauss.net/work/

4

2 に答える 2

1

最大 979 ピクセルの画面幅を対象とするメディア クエリがあり、

@media (max-width: 979px) and (min-width: 768px)

そして次は1200px以上の画面幅をターゲットにしています

@media (min-width: 1200px)

980px から 1200px の間のものはすべてデフォルトのスタイルを使用します。これを修正するには、2 番目のメディア クエリの最小幅を 1200 ピクセルではなく 980 ピクセルに変更します。

于 2013-04-30T21:00:31.990 に答える
0

[編集] それはまったく別のものです: HTML を書き直す/修正する必要があります。たとえば.span3、要素に適用して、header意図したとおりに浮動させることができます。同じことが2番目のブロックにも当てはまります。

<header class="row-fluid" style="display: inline-block;">
    <nav class="main span3">
        …
    </nav>
</header>

基本的に正しいクラスを設定しましたが、内部に全幅のブロック要素を追加しました。

于 2013-04-30T20:50:49.347 に答える