我在使用 Twitter Bootstrap 在文本旁边显示图像时遇到了一些问题。我有以下 HTML 代码:
<div class="panel panel-primary panel-projects">
<div class="panel-heading">
<h3 class="panel-title">Marijuana, Beer, and Wine Markets</h3>
</div>
<div class="panel-body">
<div class="row">
<img class="project-image col-md-4 center-block img-responsive" src="/images/project_wine.jpg"></img>
<p class="body-text col-md-8">
My content
</p>
</div>
</div>
</div>
以及以下 CSS:
.panel-projects {
margin: 35px;
}
.panel-body{
min-height: 235px;
}
.body-text{
font-size: 16px;
margin: 5px;
}
.project-image{
width: 300px;
height: auto;
text-align: center;
}
当屏幕全尺寸时,结果符合预期:(W: 1366)
但是,当屏幕尺寸缩小一点点时,就会出现堆叠问题(W:1199)
再缩小一点后,我得到了这个 - 看起来不错 (W: 991)
如何让第三个样式更快触发,才不会出现尴尬的堆叠布局?
最佳答案
宁愿使用 col-lg
而不是 col-md
<img class="project-image col-lg-4 center-block img-responsive" src="/images/project_wine.jpg"></img>
<p class="body-text col-lg-8">
我在这里发布了你的代码:http://jsfiddle.net/6xq7omfp/
关于html - 显示与文本相邻的图像时调整大小问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33220895/