Question

我有一行在桌面视图中连续显示3张图片

[1] [2] [3]

在平板电脑视图中，它显示为

[1]  [2]
[3]

我想要的是第三张图像出现在中间而不是第二行左侧（平板电脑上）

我的包含图像的div上的

类是

col-md-4 col-sm-6

创意??

Answer 1

你有几个选择，但有一个选项如下：

<div class="container">
<div class="row text-center">
    <div class="col-lg-4 col-xs-12 col-md-6">
        Container 1<img src="http://www.gifbin.com/bin/092010/1283335170_fat-cat-eating.gif">
    </div>
    <div class="col-lg-4 col-xs-12 col-md-6">
        Container 2<img src="http://www.gifbin.com/bin/092010/1283335170_fat-cat-eating.gif">
    </div>
    <div class="col-lg-4 col-xs-12 col-md-12 center">
        Container 3<img src="http://www.gifbin.com/bin/092010/1283335170_fat-cat-eating.gif">
    </div>
</div>

JS Fiddle Example

大屏幕行为

[1] [2] [3]

中等屏幕行为

[1] [2]
[3]

小型和XSmall屏幕行为

[1]
[2]
[3]

所有容器将跨越整个区域（即1 / 3,1 / 2或整个区域）但是因为它将自动对齐到左侧，因此您需要添加居中选项，文本中心在行上工作在这种情况下。

Answer 2

你可以试试这个：

<div class="col-md-4 col-xs-6">[1]</div>
<div class="col-md-4 col-xs-6">[2]</div>
<div class="col-md-4 col-xs-12">[3]</div>

它将显示在桌面视图中：

[1]    [2]    [3]

在平板电脑上观看：

    [1]     [2]
        [3]

Bootstrap - 中心在平板电脑视图中对齐图像

2 个答案: