html - Twitter ブートストラップ レスポンシブ CSS を使用する際の境界線の配置の問題

Question

Bootstrap Tutorial for Blog Designでこの投稿を見つけました。それが提供するレスポンシブレイアウトのために、プロジェクトの1つに使用する予定です。デモ用にホストされているページに問題が見つかりました。スクリーンショットを添付し ました 「JQuery と CSS を使用した Facebook タイムライン デザイン」ページの最初の投稿が背景の境界線からはみ出しています [青色でマークしています].[期待した結果ではありません] ページ内の残りの投稿が落ちています予想される動作である境界線の内側[緑色でマークされています]。最初の投稿が背景の境界線からはみ出す問題を修正する方法はありますか。これを IE、firefox、chrome でテストしましたが、結果は同じでした。ここにjsbinページを作成しました

Answer 1

jqueryセレクターを使用して解決できます

$('.row > [class*="span"]:first-child').css({"padding-left":"20px"});

Answer 2

css ファイルでは、最初のスパン要素の左側にマージンがないと記載されています。

232 行目の bootstrap-responsive.css:

.row-fluid [class*="span"]:first-child { 
    margin-left: 0px;
}

419 行目の bootstrap.css:

.row-fluid [class*="span"]:first-child { 
    margin-left: 0px;
}

これらを削除またはコメントアウトします。

Answer 3

このスタイルシートを追加します (一番下にあることをお勧めします)

.row > [class*="span"]:first-child {
    padding-left: 20px;
}  

必要に応じて、このjQueryを追加できます

$('.row > [class*="span"]:first-child').css('padding-left','20px');