Ngăn các cột chất lỏng bị phá vỡ thành dòng mới trên màn hình iPhone

Question

Tôi đang làm việc với dự án Bootstrap đầu tiên của mình và bị kẹt một chút. Ở đầu trang, tôi muốn có biểu tượng ở bên trái và 2 nút ở bên phải được xếp chồng lên nhau. Đây là những gì tôi có cho đến thời điểm này:

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span4"> 
     <img src="/img/logo.png" width="120" /> 
    </div> 
    <div class="span8"> 
     <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-map-marker"></i> Find Location</a><br /> 
     <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-comment"></i> Call Now</a>  
    </div> 
    </div> 
</div> 

Nó hoạt động như mong đợi trên máy tính để bàn, nhưng tôi trên iPhone, cột span8 bị hỏng và xuất hiện trên dòng tiếp theo. Có cách nào để ghi đè điều này không?

Answer 1

Đó là hành vi mong đợi của lưới đáp ứng, bạn có thể thấy hiệu ứng tương tự xảy ra trên trang tài liệu khởi động (đặc biệt trên bản trình diễn scaffolding) khi bạn đổi kích thước màn hình. Bạn có thể khắc phục điều này bằng cách tạo lớp của riêng bạn để bao gồm bên trong các thẻ span bạn muốn giữ cạnh nhau trên thiết bị di động và chúng tôi có thể đầu nó bằng cách gói nó vào truy vấn phương tiện được kích hoạt trên thiết bị di động có màn hình kích thước 480px hoặc thấp hơn (aka, một iphone), theo cách này nó sẽ không ảnh hưởng đến lưới đáp ứng của máy tính để bàn cho đến khi nó đạt đến giới hạn đó.

CSS

@media all and (max-width: 480px) { 
    .half { 
     float: left !important; 
     width: 50% !important; 
    } 
} 

Demo, hãy thử xem demo này trên thiết bị di động của bạn, http://jsfiddle.net/r5VCy/1/show/.

Answer 2

Trong Bootstrap 3, có một bộ CSS mới cho giàn giáo, và chúng bao gồm các tính năng cho phép bạn vô hiệu hóa việc xếp chồng trên màn hình nhỏ hơn.

Danh pháp CSS mới sử dụng "cột" thay vì "kéo dài" và chúng có nhiều loại. Kiểu "col-xs-" (cực nhỏ) cho phép bạn thiết lập lưới không chồng lên ngay cả trên các thiết bị phụ nhỏ.

Answer 3

Chỉ muốn thêm vào ghi chú trên Bootstrap 3. Tôi đã gặp vấn đề tương tự với cột gói quá sớm và không giữ chiều rộng đủ dài ("col-lg-6" theo ví dụ 'mẫu khởi động'). Thay đổi nó thành "col-sm-6" đã làm các trick - tài liệu tham khảo cho mỗi kích thước là ở đây:

http://getbootstrap.com/css/#responsive-utilities