4

アプリのフレームワークとしてTwitterBootstrapを使用しており、サムネイルを使用してさまざまな製品に関する情報を表示しています（6つを2行に分割）。ただし、サムネイルは左揃えになっているため、中央に配置できません。どうすればそれができますか？

html：

<div class="row span12">
    <ul class="thumbnails span12">
        <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 1
          </div>
        </li>
        <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 2
          </div>
        </li>
        <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 3
          </div>
        </li>
          <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 4
          </div>
        </li>
        <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 5
          </div>
        </li>
          <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 6
          </div>
        </li>
    </ul>
</div>

出力：

     _____________________
    |                     |
    |  Products           |
    | ___   ___   ___     |
    ||   | |   | |   |    |
    ||___| |___| |___|    |
    | ___   ___   ___     |
    ||   | |   | |   |    |
    ||___| |___| |___|    |
    |                     |
    |_____________________|

必要な出力：

     _____________________
    |                     |
    |  Products           |
    |   ___   ___   ___   |
    |  |   | |   | |   |  |
    |  |___| |___| |___|  |
    |   ___   ___   ___   |
    |  |   | |   | |   |  |
    |  |___| |___| |___|  |
    |                     |
    |_____________________|
4

2 に答える 2

4

ulsの幅を、追加された3つの要素の幅+境界線、マージン、およびパディングに等しく設定する必要があります。センタリングでは、左右の余白を自動に設定することで達成できます。

デモを見る http://jsbin.com/odojit/2/edit

.thumbnails li {
  width:100px;
  list-style:none;
  float:left;
  height:100px;
  margin:10px;
    border:solid black 1px;

}
ul {
  padding:0px;margin:0px;}
.span12 {
  width:368px;
  border:red solid 1px;
  margin-left:auto;
  margin-right:auto;
}

ブートストラップのようなものをオーバーライドするには、新しいコードでcssの特異性を高くする必要があります。これは、優先度が高いことを意味します。

経験則として：

IDセレクターは、要素セレクターの10倍であるクラスセレクターの10倍の価値があります。

#id div {code}

オーバーライド

.class .class .class .class .class .class .class .class .class .class {css code}

詳細については、この記事を確認してください。

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

したがって、ブートストラップがIDセレクターを使用して上書きする場合は、body #idselectorを使用して、+1の特異性を与えることができます。！importantも機能しますが、IE6では常に機能するとは限りません。

于 2012-12-19T21:07:39.547 に答える
0

あなたはこれを使うことができます........。

.thumbnails li {
  width:100px;
  list-style:none;
  float:left;
  height:100px;
  margin:10px;
    border:solid black 1px;

}
ul {
  padding:{0px;

マージン：0px; }

 <ul class="thumbnails">
        <li>
          <div class="thumbnail">
            Product 1
          </div>
        </li>
        <li>
          <div class="thumbnail">
            Product 2
          </div>
        </li>
        <li>
          <div class="thumbnail">
            Product 3
          </div>
        </li>
          <li>
          <div class="thumbnail">
            Product 4
          </div>
        </li>
        <li class="span3 producer">
          <div class="thumbnail">
            Product 5
          </div>
        </li>
          <li>
          <div class="thumbnail">
            Product 6
          </div>
        </li>
      </ul>
于 2013-07-24T14:03:23.573 に答える