Question

<ul class="thumbnails">
    <li class="span4 offset2">
        <div class="thumbnail">
            <img src="/images/johndoe.jpg" />
            <h4 style="text-align: center;">John Doe</h4>
        </div>
    </li>
    <li class="span4">
        <div class="thumbnail">
            <img src="/images/johnsmith.jpg" />
            <h4 style="text-align: center;">John Smith</h4>
        </div>
    </li>
</ul>

逻辑上有12列，它们由.span*类分配。我有两个有.span4类的缩略图。这意味着如果设备上有足够的宽度，它们可以并排显示。我希望这两个缩略图显示在中心。所以我将.offset2类添加到第一个类，以便将它们移动2列。因此，应该在中心看到它们，但它们仍然与左侧对齐。

我发现margin-left: 180px;中的规则.offset2被忽略了。因为margin-left: 20px;中的thumbnails > li会覆盖.offset2的规则。

我怎样摆脱这种冲突？

Answer 1

你可以试试这个

在ul

中又增加了一个课程

<ul class="thumbnails centerThumb">

CSS

.centerThumb .span4 {
  float: none;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}
.centerThumb {
  text-align: center
}

选中此demo

Answer 2

Try this your thumbnails will be in  center 

 <ul class="thumbnails row col-lg-5 col-xs-6 col-sm-4 col-md-4 col-lg-8">
        <li class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <div class="thumbnail">
                <img src="/images/johndoe.jpg" />
                <h4 style="text-align: center;">John Doe</h4>
            </div>
        </li>
        <li class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <div class="thumbnail">
                <img src="/images/johnsmith.jpg" />
                <h4 style="text-align: center;">John Smith</h4>
            </div>
        </li>
    </ul>
css

li{
    list-style:none;
}
.thumbnails{
    float:none;
    margin:0 auto;
}

jsfiddle link for your reference

Bootstrap缩略图不居中

2 个答案: