html - 显示与文本相邻的图像时调整大小问题

Question

我在使用 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)

如何让第三个样式更快触发，才不会出现尴尬的堆叠布局？

Answer 1

宁愿使用 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/