57

現在、同じ行に段落見出しとその右側の画像があります。

<div class="paragraphs">
  <div class="row">
    <div class="span4">
      <div class="content-heading"><h3>Experience &nbsp </h3><img src="../site/img/success32.png"/></div>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>

これは正常に機能します。コンテンツの見出しと画像は同じ行にあります。ただし、コンテンツ見出しdivの前に画像を配置すると、同じ行に表示されなくなります。これは私が達成したいことです-同じ行で画像とコンテンツの見出し-。

4

6 に答える 6

86

Twitter Bootstrapクラスを使用するのが最良の選択かもしれません：

  • pull-left要素を左にフローティングにします
  • clearfix要素にフローティング要素を含めることができます（別のクラスを介してまだ設定されていない場合）
<div class="paragraphs">
  <div class="row">
    <div class="span4">
      <div class="clearfix content-heading">
          <img class="pull-left" src="../site/img/success32.png"/>
          <h3>Experience &nbsp </h3>
      </div>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>
于 2012-08-10T12:01:54.233 に答える
48

Bootstrap v3.3.0以降では.media-left、.media-body

<div class="media">
    <span class="media-left">
        <img src="../site/img/success32.png" alt="...">
    </span>
    <div class="media-body">
        <h3 class="media-heading">Experience</h3>
        ...
    </div>
</div>

ドキュメント：https ：//getbootstrap.com/docs/3.3/components/#media

于 2014-12-17T12:14:34.370 に答える
47

フローティングを使用できます：

<div class="paragraphs">
  <div class="row">
    <div class="span4">
      <img style="float:left" src="../site/img/success32.png"/>
      <div class="content-heading"><h3>Experience &nbsp </h3></div>
      <p style="clear:both">Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>

<p>以下も同じ行に残したい場合は、

style="clear:both"

しかし、あなたは追加する必要があります

<div style="clear:both"></div>

その後。

于 2012-08-10T11:17:18.133 に答える
8

ブートストラップ3の場合。

<div class="paragraphs">
  <div class="row">
    <div class="col-md-4">
      <div class="content-heading clearfix media">
           <h3>Experience &nbsp </h3>
           <img class="pull-left" src="../site/img/success32.png"/>
      </div>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>
于 2013-12-10T10:01:38.447 に答える
6

Bootstrapのグリッドを使用して、目的の結果を達成します。class="img-response"はうまく機能します。何かのようなもの：

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3"><img src="./pictures/placeholder.jpg" class="img-responsive" alt="Some picture" width="410" height="307"></div>
            <div class="col-md-9"><h1>Heading</h1><p>Your Information.</p></div>
        </div>
    </div>
于 2015-01-09T18:49:09.663 に答える
3

ネスト列を使用

デフォルトのグリッドでコンテンツをネストするには、既存の.col-sm-*列内に新しい.rowと.col-sm-*列のセットを追加します。ネストされた行には、合計が12以下の列のセットを含める必要があります（使用可能な12個の列すべてを使用する必要はありません）。

ここに画像の説明を入力してください

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

于 2016-04-20T11:54:20.583 に答える