Bootstrap - chỉ có hàng trên thiết bị nhỏ

Question

Đối với trang kế hoạch của tôi, tôi đang sử dụng các bảng chứa nội dung của những gì mỗi gói cung cấp.

Vấn đề tôi đang gặp là bởi vì mỗi bảng là một kích thước khác nhau, khi bạn xem trên điện thoại di động nó trông như thế này:

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 1 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 2 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 3 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 4 --> </div> 
    </div> 
</div> 

Tôi muốn nó trông như thế này :

<!-- This is how I attempted to do it --> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 1 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 2 --> </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 3 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 4 --> </div> 
    </div> 
</div> 

Nhưng khi tôi làm điều đó như thế, nó trông như thế này trên màn hình lớn:

Làm thế nào tôi có thể đạt được 2 col- trên màn hình nhỏ và 4 col- trên màn hình lớn mà không cần phải lặp lại mã của tôi và sử dụng hidden- * và visible- * cho các hàng?

Đây là một bootply của trang này: http://www.bootply.com/POHPsCRmmM

Answer 1

Ở đây bạn đi:

Bootply

tôi đã nhận nó để làm việc bằng cách phân chia bên trái hai div yếu tố và phải hai div yếu tố trong container tương ứng của mình. Sau đó, tôi sử dụng một sự kết hợp của col-lg, col-md, và col-sm để đạt được hiệu quả mong muốn:

 <div class="letter-space"> 
      <div class="row"> 
       <div class="col-lg-6 col-md-12 col-sm-12"> 
       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading purple"> 
          <h1 class="panel-title fat">Free</h1> 
          <small>$0 <i>for life</i></small> 
         </div> 
         <div class="panel-body grey"> 
          Full access 
          <hr class="hr-line"> 
          New free sounds every month 
          <hr class="hr-line"> 
          <div class="click" tooltips="" tooltip-html="<center><strong>Free support in our forums</strong> <br> support.resonanceinn.com</center>" tooltip-size="small"> 
           <span>Community Support</span> 
          </div> 
          <hr class="hr-line"> 
          <a class="btn btn-primary-white btn-lrg btn-block margin-top" href="/register">Free</a> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h1 class="panel-title fat letter-space">Deluxe</h1> 
          <small>$9.99/<i>month</i></small> 
         </div> 
         <div class="panel-body"> 
          30 sounds a month 
         </div> 
        </div> 
       </div> 
       </div> 


     <div class="col-lg-6 col-md-12 col-sm-12"> 
       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h1 class="panel-title fat letter-space">Suite</h1> 
          <small>$19.99/<i>month</i></small> 
         </div> 
         <div class="panel-body"> 
          300 Sounds a month 
         </div> 
        </div> 
       </div> 


       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h1 class="panel-title fat letter-space">Penthouse</h1> 
          <small>$199/<i>year</i></small> 
         </div> 
         <div class="panel-body"> 
          Unlimited 
         </div> 
        </div> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div> 

Answer 2

Hãy thử một cái gì đó như thế này:

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 1 --> </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 2 --> </div> 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 3 --> </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 4 --> </div> 
     </div> 
    </div> 
</div> 

bootply: http://www.bootply.com/G9NGCPoOKe

Hy vọng nó sẽ làm việc cho bạn!

Answer 3

Đây là một câu hỏi hơi cũ, và nó đã có một câu trả lời chấp nhận; Tôi muốn thiết kế một chút chất lỏng hơn (và trường hợp sử dụng của tôi không thực sự phù hợp với bạn) vì vậy tôi đã đưa ra một giải pháp khác, chỉ muốn ghi lại nó ở đây cho hậu thế.

Cột khởi động dựa trên float: left, đó là lý do bạn sắp xếp bố cục lạ khi cột bọc và cột bên trái cao hơn bên phải. Trong trường hợp này, trình duyệt cố gắng đặt nó ngay bên phải, nếu không gian cho phép, trước khi chuyển nó sang dòng tiếp theo. Bạn không muốn sao chép các cột và sử dụng các lớp hiển thị/ẩn, tuy nhiên có một tùy chọn khác sử dụng các lớp hiển thị/ẩn để tận dụng thực tế rằng đây là các vùng chứa nổi. CSS có thuộc tính clear để buộc vùng chứa được di chuyển bên dưới tất cả các vùng chứa nổi (giá trị left di chuyển nó xuống dưới tất cả các dấu phẩy động bên trái, right bên dưới tất cả các dấu phẩy động và both bên dưới tất cả các dấu phẩy động, trái hoặc phải).Vì vậy, bạn có thể chèn thông tin sau giữa các cặp cột:

<div class="visible-sm visible-xs" style="clear: both;"></div> 

Bạn sẽ nhận được hiệu ứng tương tự nhưng ít phức tạp hơn, mặc dù có thể không phải là cách khởi động kosher nhất.