Question

我使用Twitter Bootstrap作为我的应用程序的框架，并使用缩略图显示有关不同产品的信息（6个分为两行）。但是，缩略图左对齐，我无法将它们设为居中。怎么可能这样做？

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           |
    |   ___   ___   ___   |
    |  |   | |   | |   |  |
    |  |___| |___| |___|  |
    |   ___   ___   ___   |
    |  |   | |   | |   |  |
    |  |___| |___| |___|  |
    |                     |
    |_____________________|

Answer 1

你需要设置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;
}

要覆盖bootstrap之类的东西，你需要在新代码中拥有更高的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/

因此，如果bootstrap使用ID选择器来覆盖它，则可以使用body #idselector，它将赋予它+1特定。！important也有效，但不能在IE6中运行。

Answer 2

您可以使用此.........

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

}
ul {
  padding:{0px;

余量：0像素; }

 <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>

无法设置中心缩略图

2 个答案: