https://gist.github.com/2354116
上記のページをChrome/Firefoxで表示すると、すべてが正常に表示されます。下部のdiv（2つの見出しとソーシャルアイコン）は、問題なくコンテナdivと中央にラップされています。
ただし、Safariで表示した場合、これらの3つのdivはまったく中央に配置されません：/
なぜこれなのかわかりませんが……誰か助けてもらえますか？
質問する
3622 次
1 に答える
1
注:デザインには多くのことを想定する必要があったため、元のデザインに合わないものはすべて変更してください。
まず、ページ要素 (コンテンツ、カルーセル、フッター) が適切に含まれていません。現在、複数の幅のコンテナーを並べて配置しようとしており、複数の場所でデザインが壊れています。
コンテンツ コンテナはwidth:940px、.wrapperdiv はwidth:750px、.paramWrapperdiv はwidth:870px、.carouseldiv は ですwidth:735px。1 つの幅を選択してそれに固執し、余白を使用してそれに応じてコンテンツをページ全体にプッシュする必要があります。クラス860pxの幅であるを使用しました。span11
次に、bootstrap.cssスタイルシートを直接変更します。つまり、ブートストラップ スタイルシートを上書きすると、ブートストラップが更新されるたびにすべての変更が失われるので、別のスタイルシートを作成し、そこにすべてのカスタム スタイルを配置してロードするだけです。」 after" ヘッダーのブートストラップ スタイルシート。
元の問題に戻ります。コンテナに幅が設定されており、その中の要素がその幅に達しないため、下部の.paraWrapperdiv が適切にスタック870pxされません。
span3+ span3+ span2+ マージン =640px
したがって、それは問題やバグではなく、単なるレイアウトです。
これは私がすぐに修正したバージョンですので、もう一度デザインに合わせて要素を変更する必要があります: http://jsfiddle.net/rzSFa/3/、これはそれがどのように見えるかのデモですお気に入り。
ところで、あなたはレスポンシブ ブートストラップ スタイルシートを無駄に使用しています。現在、あなたのケースではあまり機能していないのに、なぜそれを使用するのでしょうか? 固定バージョンをサポートするためにいくつかのメディア クエリを簡単に変更できますが、独自のすべてのクラスをカスタム幅で宣言しているため、それを含める意味がないため、まったく機能しません。
于 2012-04-11T16:28:12.427 に答える