Bootstrap - sadece küçük aygıtta satır var

Question

Planlarım sayfam için, her planın sunduğu içeriğin bulunduğu paneller kullanıyorum.

mobil ortamda görüntülediğinizde

her panel farklı bir boyut olduğu için yaşıyorum sorun şu ki, şuna benzer:

<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> 

bunun böyle bakmak istiyorum :

<!-- 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> 

Ama ben böyle yaptığımda, bu büyük ekranlarda şuna benzer: Benim kod tekrarlamak zorunda kalmadan küçük ekranlarda 2 col- ve büyük ekranlarda 4 col- elde edebilirsiniz nasıl

ve satırlar için gizli- * ve görünür- * kullanın? http://www.bootply.com/POHPsCRmmM

Answer 1

gitmek: Anladım

Bootply

kendi ilgili kaplarda sol iki div elemanları ve sağ iki div elemanları bölerek çalışmak. Sonra istediğin etkiyi elde etmek col-lg, col-md ve col-sm bir arada kullandı:

 <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

böyle bir şey deneyin: İşte

bu sayfanın bir bootply olan

<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

sizin için çalışıyor umut! İşte

Answer 3

Bu biraz eski soru ve zaten kabul edilen bir cevabı var; Biraz daha akışkan bir tasarım yapmak istedim (ve benim kullanım durumum sizinkilerle pek uyuşmuyor) bu yüzden farklı bir çözüm buldum, sadece buraya postercilik yapmak istedim.

Önyükleme sütunları float: left tabanlıdır, bu nedenle sütunlar sarıldığında ve sol sütun sağdan uzun olduğunda tuhaf düzeni elde etmenizi sağlar. Bu durumda tarayıcı alanı izin verirse bir sonraki satıra taşımadan önce daha doğru yerleştirmeye çalışır.

Sütunlarınızı kopyalamak ve görünür/gizli sınıfları kullanmak istemediyseniz, bunların yüzer kapsayıcılar olduğu gerçeğini kaldıran görünür/gizli sınıfları kullanan başka bir seçenek var. CSS, clear numaralı özelliğe sahip bir konteynerin tüm yüzer konteynırların altına taşınması için zorlar (left değeri, tüm sol kayan noktaların altında right'un altında ve tüm yüzer, sol veya sağ altında both).Dolayısıyla bunu sütun çiftleri arasında şu ekleyebilirsiniz:

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

aynı etkiyi elde, ama daha az karmaşıklık ile edeceğiz belki olmasa da en koşer önyükleme yolu.