Align hình ảnh sang trái của văn bản trên cùng một dòng - Twitter Bootstrap

Question

Hiện nay tôi có một tiêu đề đoạn và một hình ảnh sang bên phải, trên cùng một dòng:

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

này hoạt động tốt - các nội dung tiêu đề và hình ảnh trên cùng một dòng. Tuy nhiên, khi tôi đặt hình ảnh trước div nội dung, chúng không còn trên cùng một dòng. Đây là những gì tôi muốn đạt được - hình ảnh sau đó là tiêu đề nội dung - trên cùng một dòng.

Answer 1

Bạn có thể sử dụng nổi:

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

Nếu bạn muốn những điều sau <p> ở lại cùng một dòng quá, loại bỏ nó

style="clear:both" 

nhưng sau đó bạn nên thêm

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

sau nó.

Answer 2

Sử dụng lớp Twitter Bootstrap có thể là lựa chọn tốt nhất:

• pull-left làm cho một phần tử nổi trái
• clearfix cho phép các phần tử có chứa các yếu tố nổi (nếu chưa được thiết lập thông qua lớp khác)

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

Answer 3

Đối với 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> 

Answer 4

Bắt đầu với Bootstrap v3.3.0 bạn có thể sử dụng .media-left và .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> 

Tài liệu: https://getbootstrap.com/docs/3.3/components/#media

Answer 5

Tôi sẽ sử dụng lưới Bootstrap để đạt được kết quả mong muốn. Lớp = "img-responsive" hoạt động tốt. Một cái gì đó như:

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

Answer 6

Sử dụng cột lồng nhau

Để tổ nội dung của bạn với mạng lưới mặc định, thêm một .row mới và tập hợp các cột * .col-sm- trong một hiện .col-sm- * cột. Các hàng lồng nhau nên bao gồm một tập hợp các cột thêm tối đa 12 hoặc ít hơn (bạn không bắt buộc phải sử dụng tất cả 12 cột có sẵn).

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