CSS - Önyükleme: Aşağıda 767px görünüm 2 açıklıklı (veya daha fazla) satır başına yerine 1

Question

orada Bootstrap ile varsayılan bir yöntemdir yoksa 767px (mobil) bir satır içindeki her karış yapmak altında değil olur bunu düzenleyebilir nasıl 100%? Sadece% 50'ye gitmelerini istiyorum ... örneğin, biri diğerinin altında değil, yan yana olmak üzere. peşin

sayesinde

Answer 1

deneyin satır sıvı yerine iki span6 ile satır.

HTML:

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel='stylesheet' type='text/css' /> 
<div id='wrap' class='container'> 
     <div id='row1' class='row-fluid'> 
      <div id='box1' class='span6'> 
       box1 
      </div> 
      <div id='box2' class='span6'> 
       box2 
       </div> 
     </div> 
</div> 

CSS:

#wrap{ 
    background-color:black; 
    height:50px; 
} 
#box1{ 
     background-color:green; 
} 

#box2{ 
     background-color:red; 
} 

onay burada jsFiddle

Answer 2

Bu soru eski olduğunu biliyorum ama bu aynı sorununa çözüm ararken karşıya geldi sonra kendim anladım. Bu sayfayı başka birinin bulması durumunda çözümümümü göndermem gerektiğini düşündüm.

Sorunum dört sütun (dört span3 liste öğeleri) ve üç sütun (üç span4 liste öğeleri) ile başka bir sayfaya sahip bir tepki Bootstrap sayfasını vardı. Her ikisinin de 767 pikselin altındayken iki sütuna dönüşmesini istedim. Benim yapı span12 içindeki satır-sıvı tekrarlanan birkaç kez, dört sütunlu sayfası için şu şekildedir:

<div class="span12"> 
    <div class="row-fluid"> 
     <ul class="thumbnails"> 
      <li class="span3"></li> 
      <li class="span3"></li> 
      <li class="span3"></li> 
      <li class="span3"></li> 
     </ul> 
    </div> 
    </div> 

Ve yapısı satır-sıvı birkaç kez tekrar tekrar, üç sütunlu sayfa için bu gibi iç kısım 12:

<div class="span12"> 
    <div class="row-fluid"> 
     <ul class="thumbnails"> 
      <li class="span4"></li> 
      <li class="span4"></li> 
      <li class="span4"></li> 
     </ul> 
    </div> 
</div> 

Bu yapı, Bootstrap bölümünden küçük resimlerle çekilir. Sen aynı yapıyı kullanmıyorsanız bu seçiciler ayarlamak zorunda kalacak

@media screen and (max-width: 767px) { 
/* remove clear from each ul to stop them from breaking into rows */ 
ul.thumbnails::after { 
    clear: none; 
} 

/* make the width of each span equal to 47% instead of 100%. 
You could make it closer to 50% if you have no borders or padding etc. */ 
ul.thumbnails li[class*="span"]{ 
    width: 47%; 
    float: left; 
} 
    // select the second span in each row (ul) on the 3 column page 
[class*="span"] .span4:nth-child(2), 
    // select the first span in the even rows on the 3 column page 
[class*="span"] .row-fluid:nth-child(even) .span4:nth-child(1), 
    // select the even spans in each row on the 4 column page 
[class*="span"] .span3:nth-child(even) 
{ 
    float: right; //float them all to the right 
} 
} 

: İşte her ikisi 767px altında iki sütuna dönüş yapmak eklendi CSS olduğunu. En zarif seçmenler değiller, ya da eğer daha iyi yazabiliyorsanız, lütfen yapın. Onları çalıştırdığım anda, artık onlarla oynamaktan rahatsız olmazdım. Umarım bu birisine yardım eder!

[değiştir] Sadece ben aslında bütün kodunda sıvı satır kullanın fark, satır-sıvı değil ... bunu bunu değiştirmeniz gerekebilir böylece. akışkan-satır stil sayfamda herhangi bir kural olmamasına rağmen.

Bağlantı CSS doğru seçicileri ile keman: http://jsfiddle.net/rUCgS/4/

Answer 3

ben sadece @media (max-width: 767px) { ... } içeride .row-fluid [class*="span"] davranışını modifiye ve ben max-width: 480px vurduğunda geri değişti. Ayrıca, her ikisi de kenar boşluğunun kaldırılmış olduğundan emin olmak için bir satırın ilk iki açısına .span-control sınıfını ekledim. this

!important etiketler jsfiddle için yararlı olduğunu gibi

görünmelidir, ancak stil onlara ihtiyacım yok.