5

表示するサムの数が不明です。レンダリングされたHTMLの例を次に示します。

<div class="row-fluid">
        <ul class="thumbnails">
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
        </ul>
      </div>

結果は次のとおりです。 スクリーンショット

質問：UIを動的に構築するので、別の行を作成せずに2番目の行のマージンを回避するにはどうすればよいですか？<div class="row-fluid">

IE8ソリューションの更新が必要です

4

3 に答える 3

8

：nth-​​child（4n）を使用してLIの親の幅が変更されないと仮定すると、x要素をターゲットにするために機能するはずです。

.row-fluid li:nth-child(4n) {
    margin: 10px;
    padding: 0;
 }

：nth-​​child（）の式の記述方法の詳細については、仕様を参照してください。

それが機能していることを示す非常に基本的なフィドル。

アップデート

IE8を使用するには、jQueryを使用するだけです（使用していると仮定します）

$('.row-fluid li:nth-child(4n)').css({'margin':'10px'});

私はそれがトリックをするべきだと信じています。

于 2013-03-04T16:24:40.287 に答える
3

マージンは問題ない場合がありましたが、すべての行で一貫している必要がありました。

<li style="display:none"></li>これは、リストの先頭に空白を追加することで実現できます。このようにして、Bootstrapは、表示されていないマージンの削除を対象として<li>います。

マージンがあることは受け入れられないかもしれませんが、これはjsにスタイルを混ぜる必要のないエレガントなソリューションだと思います。

于 2013-06-03T21:00:07.560 に答える
0

同じ問題があり、クリーンではありませんでしたが、迅速な回避策は次のとおりでした。

.row {
   margin-left: 0px !important;
   margin-right: 0px !important;
}
于 2014-12-03T14:51:35.153 に答える