Bootstrap 3.3.6 Ranh giới lưới không cung cấp cấu trúc cứng nhắc

Question

Tôi đang cố gắng làm quen với Bootstrap và Grid. Tôi đang cố gắng tạo bố cục macro sau:

=================================================== 
| PageTitle    |________________________| 
|________________________| +1 |________| img| img| 
| Make a choice.   |_____|________|____|____| 
|      |      | 
=================================================== 

Phần tử chính là một jumbotron, trong đó có một hàng. Sau đó, tôi chia hàng thành hai thành phần <div> của class="col-xs-12" mỗi (tôi muốn bảng điều khiển bên trái vẫn ở phía trên bên phải trên thiết bị di động).

Bảng điều khiển bên trái được chia thành hai hàng với một số nội dung văn bản.

Bảng điều khiển bên phải chứa một hàng, được chia thành hai phần một lần nữa. Các phần bên trái và bên phải là cả hai class="col-xs-12 col-sm-3". Điều này là để đảm bảo rằng trên màn hình nhỏ hơn, mỗi màn hình phù hợp với nhau trên đầu trang khác và lấp đầy toàn bộ không gian ngang. Một hàng và cột tiếp theo cấu trúc con chia tách không gian như được hiển thị.

Đây là mã của tôi cho đến nay: Link

Như bạn sẽ có thể thấy, cách bố trí là hành xử như tôi mong chờ ở kích thước xs (sau đây 768px). Tuy nhiên, ở kích thước lớn hơn, các hàng và cột trong bảng điều khiển bên phải chồng lên nhau và hình ảnh đã biến mất.

Bất kỳ hướng dẫn nào để hiểu tại sao lưới không hoạt động như tôi mong đợi (tức là một bảng phản ánh thông minh ở các kích thước màn hình khác nhau), sẽ được đánh giá cao!

Answer 1

Cấu trúc lưới trên bảng bên phải của thiết bị nhỏ có vẻ sai.

Trong đoạn mã của JSFiddle của bạn. Trên số dòng 17 and 32, hãy thay đổi class="col-xs-6 col-sm-3" thành class="col-xs-6 col-sm-6".

Điều này sẽ làm cho hình ảnh xuất hiện trở lại.

Cập nhật:

Ofcourse bạn có thể, Bạn chỉ cần thay đổi cách tiếp cận lấy của bạn để xây dựng, và bất kỳ cấu trúc là có thể. Kiểm tra this Fiddle. Nó hiển thị các cột dưới hàng và hàng dưới cấu trúc cột theo cách dễ hiểu.

Trong trường hợp của bạn những gì bạn cần làm là ở cấp cao nhất chia cấu trúc của bạn thành 4 cột và làm bất cứ điều gì bạn muốn bên trong mỗi cột.

Cách dễ nhất để tiếp cận và hiểu được bất kỳ cấu trúc phức tạp:

• Đầu Xác định có bao nhiêu cột kết cấu của bạn cần. Phần lớn nhất phải luôn được chia thành các cột để xem xét.

• Khi cột được xác định, hãy xem xét từng cột dưới dạng một trang có chiều rộng đầy đủ (bỏ qua các cột khác trong thời gian này) và chia một lần nữa và cứ tiếp tục như vậy.

đơn giản :-)

Answer 2

Tôi xin lỗi nếu câu hỏi tôi đã hỏi là không rõ ràng trong bất kỳ cách nào, nhưng đây là những gì tôi đang cố gắng làm.Hy vọng rằng, khi nhìn thấy câu trả lời side-by-side với câu hỏi sẽ giúp làm rõ:

HTML

<div class="row"> 
    <div class="col-xs-12 col-sm-5"> 
    <h2> 
     PageTitle. 
    </h2> 
    </div> 
    <div class="col-xs-6 col-sm-1 text-center"> 
    <h2> 
     +1 
    </h2> 
    </div> 
    <div class="col-xs-6 col-sm-2"> 
    <div class="statsbox"> 
     <div class="statsbaryes"> 
     </div> 
     <div class="statsbarno"> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-6 col-sm-2 text-center"> 
    <img id="image1" alt="image" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" /> 
    </div> 
    <div class="col-xs-6 col-sm-2 text-center"> 
    <img id="image2" alt="face" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" /> 
    </div> 
</div> 

CSS

.statsbaryes { 
    height: 30px; 
    background-color: green; 
    width: 20%; 
} 
.statsbarno { 
    height: 30px; 
    background-color: red; 
    width: 80%; 
} 
.statsbox { 
    height: 66px; 
    right: 0px; 
    width: 100%; 
    border: 3px solid grey; 
} 

https://jsfiddle.net/z9jvnahd/

Như đã đề cập trong nhận xét của tôi về câu trả lời của Nikhil, vấn đề xuất phát từ sự hiểu lầm của tôi rằng tôi có thể có nhiều lớp phân mục hàng/cột như tôi muốn giúp bố cục cấu trúc, miễn là có 12 cột cho mỗi hàng hợp lý trên màn hình. Tuy nhiên, đây không phải là trường hợp, và các cột dường như cần phải được nhóm lại với nhau trong một hàng cấp cao signle để hành xử một cách chính xác - từ thử nghiệm của tôi.