Làm cách nào để tách các hình ảnh này bên trong hệ thống lưới Bootstrap 3?

Question

Tôi tự hỏi đó là cách tốt nhất để đặt không gian ở giữa 3 hình ảnh với CSS bằng cách sử dụng Bootstrap 3 RC2 là những gì tôi đã thực hiện tại thời điểm này không tự động thay đổi kích cỡ hình ảnh, mặc dù tôi đã thiết lập chiều rộng để tự động Thẻ id #picture của tôi. Tôi muốn cho họ để b inline và thay đổi kích thước hình ảnh cho phù hợp.

Dưới đây là đánh dấu của tôi:

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-4"> 
      <img src="http://placehold.it/350x250" id="picture" /> 
     </div> 
     <div class="col-lg-4"> 
      <img src="http://placehold.it/350x250" id="picture" /> 
     </div> 
     <div class="col-lg-4"> 
      <img src="http://placehold.it/350x250" id="picture" /> 
     </div> 
    </div> 
</div> 

CSS:

.container { 
    max-width:1000px; 
    background-color:white; 
} 
body { 
    background-color:cyan 
} 
#picture { 
    width:auto; 
    /*margin-left:10px; */ 
    /*margin-right:10px; */ 
} 
.col-lg-4 { 
    margin-left:10px; 
    margin-right:10px; 
} 

Kiểm tra Fiddle của tôi cho một cái nhìn rõ ràng hơn. Có cách nào tốt hơn để xử lý việc này không?

Answer 1

Xóa CSS của riêng bạn cho .col-lg-4: các lề này có thể làm hỏng CSS Bootstrap. Bên cạnh đó, các cột này chỉ hiển thị khi chiều rộng màn hình của bạn lớn hơn 1200 px.

Thêm các lớp sau vào số div của bạn: .col-xs-4.col-sm-4 và .col-md-4 và cung cấp cho hình ảnh thuộc tính class="img-responsive".

Nó sẽ hoạt động ngay bây giờ nếu bạn muốn.

Answer 2

Nếu tôi hiểu câu hỏi của bạn đúng, bạn muốn hiển thị những hình ảnh này theo một đường ngang, với một khoảng không nhất định giữa các hình ảnh?

Trước hết để có được của DIV trong dòng thay đổi

sau

.col-lg-4 { 
    display: inline-block; 
} 

thử để xác định chiều rộng cho container và hàng của bạn (ví dụ 100%) và sau đó divs bạn giữ hình ảnh. Hy vọng điều này sẽ giúp bạn ra ngoài?

Answer 3

Như Harm Wellink đã đề cập, hãy xóa css của bạn. Bạn chỉ cần html sau. Lưu ý lớp "col-xs-4" và "img-responsive". Bạn không cần col-sm-4, col-md-4, col-lg-4 nếu bạn dự định có 3 cột trên tất cả các kích cỡ màn hình.

<div class="container"> 
<div class="row"> 
    <div class="col-xs-4"> 
     <img src="http://placehold.it/350x250" id="picture1" class="img-responsive" /> 
    </div> 
    <div class="col-xs-4"> 
     <img src="http://placehold.it/350x250" id="picture2" class="img-responsive" /> 
    </div> 
    <div class="col-xs-4"> 
     <img src="http://placehold.it/350x250" id="picture3" class="img-responsive" /> 
    </div> 
</div>