Wiele przęseł w jednym rzędzie z Twitter Bootstrap

Question

Używając standardowej siatki reagującej na płynną siatkę 940px Twittera Bootstrap, próbuję uzyskać wiele divów .span w jednym .row.

Chcę pokazać maksymalnie 3 .span w każdym wewnętrznym wierszu, który rośnie wraz ze stroną. Więc w miarę dodawania kolejnych .span są one po prostu dodawane do .row.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <div class="span4">1</span>
      <div class="span4">2</span>
      <div class="span4">3</span> 
      <div class="span4">4</span>  <!-- wrap to a new line-->                
      <div class="span4">5</span>    
    </div>
  </div>
</div>

Problem, z którym się borykam, polega na tym, że span4, który zawija się do nowej linii, ma odziedziczony lewy margines. Chociaż mogę to naprawić za pomocą nth-child() w nowoczesnych przeglądarkach, oczywiście nadal dotyczy to IE.

Jakieś pomysły, jak mogę to osiągnąć?

css less twitter-bootstrap

6

jigglyT101 28 luty 2012, 11:40

Answer 1

Zdecydowałem się użyć selektora n-tego dziecka, aby usunąć margines na niektórych .span. Więc moje ostateczne rozwiązanie wyglądało tak:

Jedna kolumna rozpiętości od 320px do 979px

Dwie kolumny rozpiętości od 980px do 1409px

Trzy kolumny przęseł dla 1409px i więcej

@media (min-width: 320px) and (max-width:979px) { 
    /* one column */
    .row-fluid .span4 {width:100%}
    .row-fluid .span4 {margin-left:0;}  
}

@media (min-width: 980px) and (max-width:1409px) { 
    /* two columns, remove margin off every third span */
    .row-fluid .span4 {width:48.717948718%;}
    .row-fluid .span4:nth-child(2n+3) {margin-left:0;}
}

@media (min-width: 1410px) { 
    /* three columns, .span4's natural width. remove margin off every 4th span */
    .main .span4:nth-child(3n+4) {margin-left:0;}
}

Dla IE7 i 8 ustawiłem szerokość każdego span na 48.717948718% (a więc dwa na wiersz) w css - konkretnie dla tych wersji za pomocą klasy html5 bolierplate .oldie html. Następnie użyłem Modernizr i niestandardowego testu dla nthchild, który można znaleźć pod adresem https://gist.github.com/1333330 i usunięto margines dla każdego parzystego zakresu, jeśli przeglądarka nie obsługuje selektora n-tego dziecka.

if (!Modernizr.nthchildn) {  
  $('.span4:even').addClass('margless');
}

8

jigglyT101 2 marzec 2012, 00:20

Answer 2

Twoje pytanie określa, że chcesz, aby kolumny automatycznie zawijały się do następnej linii, ale w systemie siatki Bootstrap .span są specjalnie zaprojektowane do pracy w .row, to jest siatka. W kodzie nie używasz żadnych .rows. Więc moja sugestia, jeśli pozostaniesz wierny siatce, to aby twój kod wyglądał mniej więcej tak:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <div class="row">
        <div class="span4">1</div>
        <div class="span4">2</div>
        <div class="span4">3</div> 
        <div class="span4">4</div>  <!-- wrap to a new line-->                
        <div class="span4">5</div>  
      </div>  
    </div>
  </div>
</div>

Oto jsfiddle, który pokazuje przykład OP i inny dla jasności. http://jsfiddle.net/qJ55V/5/

Musisz użyć .row (nie .row-fluid), aby zastosować dziedziczone style do każdej kolumny (rozpiętości). Tak, to dodatkowe znaczniki, ale nieużywanie .row spowoduje niestety pomieszanie kolumn.

4

2 revs 14 marzec 2012, 02:49

Answer 3

Prawdopodobnie nie jest to najbardziej eleganckie rozwiązanie, ale po prostu definiuję nową klasę css w moim niestandardowym arkuszu stylów, taką jak:

.margless{
    margin:0 !important;
}

Następnie nakładam go na dowolny element, w którym nie chcę mieć marginesów. Wpadłem na to samo za pomocą bootstrapu i nie mogłem znaleźć alternatywnego rozwiązania.

3

RazorThin 28 luty 2012, 11:48

Wiele przęseł w jednym rzędzie z Twitter Bootstrap

3 odpowiedzi

Podobne pytania

Nowe pytania

css