Выровнять изображение слева от текста на одной строке - Twitter Bootstrap3

В настоящее время у меня заголовок абзаца и изображение справа от него в той же строке:

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

Это прекрасно работает - заголовок контента и изображение находятся на одной строке. Однако, когда я помещаю изображение перед заголовком заголовка контента, они больше не находятся на одной строке. Это то, чего я хочу достичь - изображение, затем заголовок содержания - в той же строке.

Ответы

Ответ 1

Вы можете использовать float:

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

после него.

Ответ 2

Использование классов 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>

Ответ 3

Начиная с 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

Ответ 4

Для Bootstrap 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>

Ответ 5

Я бы использовал сетку Bootstrap для достижения желаемого результата. class= "img-отзывчивый" работает красиво. Что-то вроде:

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

Ответ 6

Используйте столбец "Вложенность"

Чтобы разместить ваш контент в сетке по умолчанию, добавьте новый .row и набор столбцов .col-sm- * в существующий столбец .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>