css - 仅对小型设备使用偏移量的中心 Bootstrap 列

Question

我正在尝试在图像旁边显示文本。我希望它仅在设备宽度低于 767px 时堆叠。否则，我希望他们并排。在此堆叠过程中，图像是响应式的，因此它占据了文本上方的整行。为了避免这种情况，我尝试在列为 xs 时限制列的大小。这可确保图像在指定的列大小范围内。现在我想将图像居中。我尝试使用偏移方法，但它迫使它们在所有分辨率下堆叠。

这是代码和 fiddle

<div class="container">
<div class="row">
    <div class="col-xs-12 col-sm-4 col-lg-4">
        <img
            src="https://c1.staticflickr.com/3/2813/9093733888_79ccacf171_z.jpg"
            alt="pic" class="img-responsive img-circle">
    </div>
    <div
        class="col-xs-12 col-sm-6 col-sm-offset-2 col-lg-6 col-lg-offset-2 text-center">
        <h3>Hello World!</h3>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa
            qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
</div>

在上面的代码中，如您所见，图像在小型设备上占满了宽度

<div class="col-xs-12 col-sm-4 col-lg-4">

减小图像尺寸的一种方法是减小列尺寸。所以上面一行改为

<div class="col-xs-4 col-sm-4 col-lg-4">

它占据了屏幕的左半部分。所以为了使它居中，我添加了一个偏移量。

<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-lg-4">

这句话适用于 xs 分辨率，但两列也会在更高的分辨率(sm、lg)下堆叠。

我对 bootstrap、css、html 等还很陌生。所以我可能在这里遗漏了一些非常明显的东西。在这个特定案例中我找不到任何相关的解决方案，因此感谢任何帮助/见解。

Answer 1

您必须反转每个其他 col 类的偏移量(尽管为什么......我不确定):

<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-0 col-lg-4 col-lg-offset-0">

演示:http://jsfiddle.net/dpvarcfe/