html - 以磁贴为中心的 Twitter Bootstrap

Question

我正在使用 bootstrap 创建一个应用程序，它的风格类似于瓷砖。我是这个网页设计的新手，我很难安排这些瓷砖。我的要求是，我想在轮播中放置 4 个图 block ，这样每张幻灯片应包含 4 个图 block 。

我尝试使用 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>

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

问候， 拉吉

Answer 1

使用text-center

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