Cách đặt chiều cao tối thiểu cho thùng chứa bootstrap

Question

Tôi có một số vấn đề với vùng chứa trong bootstrap. Mục tiêu của tôi là có một vùng chứa chỉ cao bằng nội dung. Ví dụ:

<div class="container"> 
    <img src="#.jpg" height="200px" width="300px"> 
</div> 

Trong ví dụ trên, vùng chứa chỉ cao bằng hình ảnh. Tuy nhiên, mặc dù tôi đặt chiều cao tối thiểu cho vùng chứa qua CSS thành 0px, trình duyệt của tôi sẽ tự động tích hợp chiều cao tối thiểu 594px theo kiểu phần tử. Mã nguồn trong trình duyệt trông giống như sau:

<div class="container" style="min-height: 594px;"> 
    <img src="#.jpg" height="200px" width="300px"> 
</div> 

Nhưng trong tệp HTML phần tử kiểu không được xác định. Điều này xảy ra với Chrome cũng như IE. Do đó, mã CSS (min-height: 0px;) đang bị bỏ qua.

CSS:

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
    max-width: 900px; 
    overflow:hidden; 
    min-height:0px; 
} 

Có ai có ý tưởng về làm thế nào tôi có thể khắc phục vấn đề này?

Answer 1

Hai điều đang diễn ra ở đây.

1. Bạn hiện không sử dụng lớp chứa đúng cách.
2. Bạn đang cố gắng để ghi đè CSS Bootstrap cho lớp container

Bootstrap sử dụng một hệ thống lưới điện và lớp .container được định nghĩa trong CSS riêng của nó. Lưới phải tồn tại trong một lớp container DIV. Vùng chứa DIV chỉ là một dấu hiệu cho Bootstrap biết rằng lưới trong đó có cha mẹ. Do đó, bạn không thể đặt chiều cao của vùng chứa.

Những gì bạn muốn làm là như sau:

<div class="container-fluid"> <!-- this is to make it responsive to your screen width --> 
    <div class="row"> 
     <div class="col-md-4 myClassName"> <!-- myClassName is defined in my CSS as you defined your container --> 
      <img src="#.jpg" height="200px" width="300px"> 
     </div> 
    </div> 
</div> 

Here bạn có thể tìm thêm thông tin trên hệ thống lưới điện Bootstrap.

Điều đó đang được nói, nếu bạn hoàn toàn PHẢI ghi đè Bootstrap CSS sau đó tôi sẽ cố gắng sử dụng "! Important" khoản để định nghĩa CSS của tôi như vậy ...

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
    max-width: 900px; 
    overflow:hidden; 
    min-height:0px !important; 
} 

Nhưng tôi đã luôn luôn phát hiện ra rằng "! quan trọng" khoản chỉ làm cho CSS lộn xộn.

Answer 2

Bạn đã thử height: auto; trên số .container div?

Đây là fiddle, nếu bạn thay đổi chiều cao img, chiều cao vùng chứa sẽ điều chỉnh theo chiều cao đó.

EDIT

Vì vậy, nếu bạn "không thể" thay đổi nội tuyến min-height, bạn có thể ghi đè lên phong cách nội tuyến với một tham số !important. Nó không phải là cách sạch nhất, nhưng nó giải quyết vấn đề của bạn.

thêm vào lớp .container bạn dòng này

min-height:0px !important;

Tôi đã cập nhật fiddle tôi để cung cấp cho bạn một ví dụ.