仅使用偏移的中心引导列 [英] Center bootstrap column using offset for small devices only

问题描述

我想在图片旁边显示文字。我希望它只有当设备低于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 =picclass =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> 
  

在上面的代码中，如图所示， p>

< 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分辨率很好，但是两列以更高的分辨率，1g）。

我对bootstrap，css，html等等不太熟悉。所以我可能在这里缺少一些很明显的东西。

解决方案

您必须撤消相应的解决方案（尽管为什么...我不确定）：

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

I am trying to display text alongside an image. I want it to stack only when the device is below 767px wide. Otherwise, I want them to be side by side. During this stacking, the image is responsive so it takes up and entire row above the text. To avoid this, I tried to limit the size of the column when it is xs. This makes sure the image is within the specified column size. Now I want to center the image. I tried to use the offset method but it's forcing them to stack at all resolutions.

Here is the code and the 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>

In the above code, as you can see, the image is taking full width on small devices

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

One way to reduce the size of the image is the reduce the column size. So the above line is changed to

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

This occupies the left half of the screen. So to center it I added an offset.

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

This words fine for xs resolution but the two columns get stacked at higher resolutions (sm, lg) as well.

I'm fairly new to bootstrap, css, html etc. So I might be missing something very obvious here. I couldn't find any relevant solution in this specific case so any help/insight is appreciated.

解决方案

You have to reverse the offsetting for each of the other col-classes (although why... I'm not sure):

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

DEMO: http://jsfiddle.net/dpvarcfe/

这篇关于仅使用偏移的中心引导列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！