Question

注意：请阅读与其他主题略有不同的说明：我的模板中有一个container div在该容器中我有六个div所以我想用以下方式显示它们居中对齐。

在桌面版本三列（container的中心）
在iPad版本两列（container的中心）
在移动版本一列（container的中心）

＆＃13;

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

＆＃13;

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

Answer 1

我不确定我是否完全理解这个问题（可能会添加一个模拟图片？），但是下面呢？

＆＃13;

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

＆＃13;

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

＆＃13;

以上：

XS屏幕（＆lt; 768px）[电话]
这三个部分出现在一个列中。
SM屏幕（≥768px）[平板电脑]
这三个部分出现在两列中（第三列带到下一行）。
MD屏幕（≥992px）[桌面]
这三个部分分为三列。

如何在bootstrap中体验内容中心

1 个答案: