在文本旁邊顯示圖像時調整大小問題

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/

Answer 2

您將嘗試這樣做，可能會解決您的問題。

您可以在內容開始之前在p標簽中添加圖片：這樣

<div class="row">
             <p class="body-text col-md-8">
<img class="project-image col-md-4 center-block img-responsive" src="/images/project_wine.jpg"></img>
My content
             </p>
          </div>

Answer 3

從“正文”中刪除邊距，因為邊距也將計入CSS Box-Model。 而是使用填充。

.body-text{
    font-size: 16px;
    padding: 5px;
}

Answer 4

您應該將columns與要添加的其他類分開：通過圍繞內容使用columns 。

• 您也有一個不需要的img結束標簽。 <img />

  col-md-4 img

  col-md-8

請參見示例代碼段。

 .panel-projects { margin: 35px; } .panel-body { min-height: 235px; } .body-text { font-size: 16px; margin: 5px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <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"> <div class="col-md-4"> <img class=" center-block img-responsive" src="http://placehold.it/300x300" /> </div> <div class="col-md-8"> <p class="body-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> </div> </div> </div>