使用 Bootstrap 3,我试图将图像居中放置在它自己的行中。这是我所拥有的,它对各种显示尺寸的响应都很好:
<div class="row">
<div class="col-lg-2 col-lg-offset-5 col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3 text-center">
<img src="img.jpg" class="img-responsive">
</div>
</div>
但是,.img-responsive
设置 max-width
: 100%。图像在某些显示器上太大。例如,我宁愿使用 col-lg-1
而不是 col-lg-2
。
显然,我可以执行 col-lg-1 col-lg-offset-5
但内容会偏离中心。
在这种情况下,是否有等效于 col-lg-1 col-lg-offset-5.5
的方法,或其他一些使内容居中的方法?
最佳答案
默认情况下我会拒绝。但是Bootstrap customize是可能的然后您可以使用 @grid-columns
定义您的自定义响应式网格列。您可以指定 16。
<div class="row">
<div class="col-lg-2 col-lg-offset-7 text-center">
<img src="img.jpg" class="img-responsive">
</div>
</div>
或者您可以将图像的样式设置为更小的宽度。
<div class="row">
<div class="col-lg-2 col-lg-offset-5 col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3 text-center">
<img src="img.jpg" class="img-resize img-responsive">
</div>
</div>
<style type="text/css">
.img-resize {
width: 200px;
}
</style>
关于css - 在 Bootstrap 中使用不均匀偏移使内容居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39863562/