jquery - 如何在bootstrap中体验make content center

Question

注意:请仔细阅读说明，与其他主题略有不同:我的模板中有一个 container div，在那个容器中我有六个 div，所以我想使用以下方式让它们居中对齐。

• 桌面版三列(容器中心)
• 在 iPad 版本上有两列(container 的中心)
• 在移动版第一列(container 的中心)

<div class="container">
    <div class="box_container">
            <img src="../product_img_10.png">
            <a href="#" class="product_title">TITLE FOR HIM</a>
        </div>
    <div class="box_container">
    	<img src="../product_img_10.png">
        <a href="#" class="product_title">BOXES FOR HER</a>
    </div>
    <div class="box_container">
    	<img src="../product_img_10.png">
        <a href="#" class="product_title">BOXES FOR COUPLES</a>
	</div>
</div>

我很想知道是否有任何类可以解决这个问题或需要编辑一些 LESS 文件代码。提前致谢。

Answer 1

我不确定我是否完全理解这个问题(也许添加模型图像？)，但是以下内容呢？

/* I'm not sure what you're stylings are, but just taking a stab */
.box_container { text-align: center; }
.box_container img { display: block; }
.box_container img, .box_container p { margin: auto; }

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="box_container">
                <img src="http://placehold.it/50" alt="" />
                <a href="#" class="product_title">TITLE FOR HIM</a>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="box_container">
                <img src="http://placehold.it/50" alt="" />
                <a href="#" class="product_title">BOXES FOR HER</a>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="box_container">
                <img src="http://placehold.it/50" alt="" />
                <a href="#" class="product_title">BOXES FOR COUPLES</a>
            </div>
        </div>
    </div>
</div>

有了上面的:

• XS 屏幕(<768 像素)[手机]
  这三件作品出现在一个单独的栏中。
• SM 屏幕(≥768 像素)[平板电脑]
  这三件作品出现在两列中(第三件进入下一行)。
• MD 屏幕(≥992 像素)[桌面]
  这三件作品出现在三列中。