Question

我有以下代码 -

<div class="row text-center" style="border: 1px solid red; padding: 10px;">
        <div class="col-sm-3 col-md-2">
            <div class="thumbnail">
                <img src="http://fakeimg.pl/154x122/?text=Product">
                <div class="caption text-center">
                    <h4>Product Name</h4>
                </div>
            </div>
        </div>
        <div class="col-sm-3 col-md-2">
            <div class="thumbnail">
                <img src="http://fakeimg.pl/154x122/?text=Product">
                <div class="caption text-center">
                    <h4>Product Name</h4>
                </div>
            </div>
        </div>
        <div class="col-sm-3 col-md-2">
            <div class="thumbnail">
                <img src="http://fakeimg.pl/154x122/?text=Product">
                <div class="caption text-center">
                    <h4>Product Name</h4>
                </div>
            </div>
        </div>
        <div class="col-sm-3 col-md-2">
            <div class="thumbnail">
                <img src="http://fakeimg.pl/154x122/?text=Product">
                <div class="caption text-center">
                    <h4>Product Name</h4>
                </div>
            </div>
        </div>
</div>

Screenshot of current implementation

我无法将它们置于row div的中心位置。我在SO上尝试了很多选项但是无法工作。

我可能有不同数量的缩略图，所以我不能在这里添加任何拉动或偏移类。

如何让它们集中对齐？

Answer 1

为您的第一列div添加一个额外的课程col-md-offset-2如下

<div class="col-sm-3 col-md-offset-2 col-md-2">

如果您无法使用offset，则应将课程center-divs添加到所有col- div，并将以下代码添加到自定义css中。

.center-divs{
    float: none;
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
}

中心对齐缩略图 - Bootstrap 3

1 个答案: