中心引导列仅使用偏移量来处理小型设备

Question

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

这是代码和小提琴

<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-class的偏移量(虽然为什么......我不确定):

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