CSS 仅对小型设备使用偏移的中心引导列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25480047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center bootstrap column using offset for small devices only
提问by Abhay
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.
我正在尝试在图像旁边显示文本。我希望它仅在设备宽度低于 767 像素时堆叠。否则，我希望他们并排。在此堆叠期间，图像具有响应性，因此它占据文本上方的整行。为了避免这种情况，当它是 xs 时，我尝试限制列的大小。这确保图像在指定的列大小内。现在我想将图像居中。我尝试使用偏移方法，但它迫使它们以所有分辨率堆叠。
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">
<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">
<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">
<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.
这对于 xs 分辨率来说很好，但两列也以更高分辨率（sm，lg）堆叠。
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.
我对 bootstrap、css、html 等很陌生。所以我可能在这里遗漏了一些非常明显的东西。在这种特定情况下，我找不到任何相关的解决方案，因此感谢您提供任何帮助/见解。
回答by Shawn Taylor
You have to reverse the offsetting for each of the other col-classes (although why... I'm not sure):
您必须反转每个其他 col-classes 的偏移量（尽管为什么......我不确定）：
<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-0 col-lg-4 col-lg-offset-0">
回答by Valeri Crudu
I'm not sure if I got it right but, maybe this will help you:
我不确定我是否做对了，但是，也许这会对您有所帮助：
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">
<img src="https://c1.staticflickr.com/3/2813/9093733888_79ccacf171_z.jpg" class="img-responsive img-circle">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 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>
Or check the Demo Here, let me know if this helps you
