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

而是使用glDrawArrays代替col-lg

col-md

我在这里发布了您的代码：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

从＆＃34;正文＆＃34;删除保证金因为保证金也会计入CSS Box-Model。而是使用填充。

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

Answer 4

您应该将columns与其他正在添加的课程分开：使用columns围绕您的内容。

您还有一个关闭img标签，这是不必要的。 <img />

COL-MD-4 IMG

COL-MD-8

请参阅示例代码段。

＆＃13;

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

＆＃13;

<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>

＆＃13;

在显示与文本

4 个答案: