0

私は自分のウェブサイトのナビゲーションをコンテンツ本文に集中させるのに苦労しています。ナビゲーションはブラウザではなく、それを中心に配置したいと思います。これは、コンテンツ本文の少し左に見え、正しく見えないためです。

それは可能ですか。http://www.bryananthonylewis.com/TwitterBootstrapを使用した単純なブログ。

4

3 に答える 3

0

次のスクリーンショットを参照する場合：

スクリーンショット

アイコンの幅が中央で計算されていないことを除いて、すべてが完全に並んでいることがわかります。明らかに、アイコンに幅を持たせたいと思います。

では、どうすればそれができるでしょうか。

おそらく、次のようにiタグに何かを追加します。

i {

  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  vertical-align: text-top; 

}

アップデート：

スクリーンショット

上のスクリーンショットは問題を示しています。メディアクエリの後、サイトはタブレットモードになり、ナビゲーションはオフになります。さあ、仕事に戻りましょう！

于 2013-02-11T19:38:27.497 に答える
0

ヘッダーに問題はありません。実際には、以下のコンテンツは中央に配置されていません。これは、クラス「span8 offset2 middle」の直下にある不要な div が原因で発生していdiv.containerます。その div を完全に削除し.container、css ファイルでオーバーライドして、これを修正します。

.container {
  width:777px;
}

Chrome の Web インスペクタ内での同じ編集の例

ここに画像の説明を入力

于 2013-02-11T19:17:21.947 に答える
0

私はあなたがここで間違った軌道に乗っていると思います..

chromeinspect を使用したクイック スキャンでは、メイン コンテンツ (#modal-contact のすぐ下のコンテナー要素内の最初の要素) に span8 オフセット 2 を使用していることがわかります。メイン コンテンツはヘッダーではなく少し右側にあると思います左の方です。

私のクイックフィックス：

オフセットを削除し、そのコンテンツの CSS スタイルを次のように取得します。

float: none;
margin: 0 auto; /*replace 0 for top margin*/

Pankajが提案するようにコンテナに幅を設定することもうまくいくかもしれませんが、この方法でブートストラップによって提供される動的な幅の変更が失われる可能性があります...チェックしなかったので、その部分が間違っている可能性があります

アップデート

明確にするための別の更新

以前の修正を削除します。#modal-contact のすぐ下にあるコンテナ要素に、ページの上部ではなく、ラッピング div を追加します...

<div class="container">
    <div class='row'>
        <div class="span8 offset2">
             blogcontent here
        </div>
    </div>
<div>

おっとコードタグがここにありませんでした

これは同じことをするべきだと感じています。また、ヘッダーにも同じ修正が必要だと思います。しかし、私は100％確信が持てないので、うまくいくかどうかコメントしてみてください. このアップデートは公式ドキュメントに基づいています

ブートストラップのドキュメント

うまくいかない場合は、私の提案を忘れて、うまくいく方法に固執してください

于 2013-02-11T19:19:20.137 に答える