Twitter引导程序以瓷砖为中心

Question

我正在使用bootstrap创建一个应用程序，它就像样式一样。我是这个网页设计的新手，我有点难以安排这些瓷砖。我的要求是，我想在旋转木马内放置4个瓷砖，每个滑梯应包含4个瓷砖。

我尝试使用col-cm-6将容器平分。但是瓷砖保持左对齐。

<div class="container">
        <div class="row">
            <h1>Sample tiles using bootstrap classes</h1>
            <div class="row">

                <div class="col-sm-6">
                    <a href="#" title="Image 1">
                        <img src="//placehold.it/250x250" class="thumbnail img-responsive danger" /></a>
                </div>
                <div class="col-sm-6 ">
                    <a href="#" title="Image 1">
                        <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
                </div>
                <div class="col-sm-6 ">
                    <a href="#" title="Image 1">
                        <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
                </div>
                <div class="col-sm-6 ">
                    <a href="#" title="Image 1">
                        <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
                </div>
            </div>
        </div>
    </div>

有谁能告诉我我错过了什么。

此致 Raaj

Answer 1

使用text-center

DEMO: demo full screen

<div class="container text-center">
            <h1>Sample tiles using bootstrap classes</h1>

            <div class="row">

                <div class="col-sm-6">
                    <a href="#" title="Image 1">
                        <img src="//placehold.it/250x250" class="thumbnail img-responsive danger" /></a>
                </div>
                <div class="col-sm-6 ">
                    <a href="#" title="Image 1">
                        <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
                </div>
                <div class="col-sm-6 ">
                    <a href="#" title="Image 1">
                        <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
                </div>
                <div class="col-sm-6 ">
                    <a href="#" title="Image 1">
                        <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
                </div>
            </div>
    </div>

CSS：

.thumbnail {
margin: 0 auto;
}