Несколько пролетов в одной строке с помощью Twitter Bootstrap - PullRequest
Новая
       27

Несколько пролетов в одной строке с помощью Twitter Bootstrap

6 голосов
/ 28 февраля 2012

Используя стандартную сетку Bootstrap от 940px для твиттера, я пытаюсь получить несколько .span делений в один .row.

Я хочу показать максимум 3 .span на каждой внутренней строке, которая растет вместе со страницей.Таким образом, по мере добавления новых .span они просто добавляются к .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>

Проблема, с которой я сталкиваюсь, заключается в том, что span4, который переносится на новую строку, имеет унаследованное левое поле.Хотя я могу исправить это с помощью nth-child () в современных браузерах, это, очевидно, по-прежнему влияет на IE.

Есть идеи, как мне этого добиться?

Ответы [ 3 ]

8 голосов
/ 02 марта 2012

Я решил использовать селектор nth-child для удаления поля в некоторых .span.Итак, мое окончательное решение выглядело так:

Один столбец пролетов от 320 до 979 пикселей

Два столбца пролетов от 980 до 1409 пикселей

Три столбца пролетов для 1409 пикселей и выше

@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;}
}

Для IE7 и 8 я установил ширину каждого промежутка равным 48,717948718% (так по два на строку) в CSS - специально для этих версий, используя html5 bolierplate .oldie html class.Затем я использовал Modernizr и пользовательский тест для nthchild, найденный в https://gist.github.com/1333330, и убрал поле для каждого четного промежутка, если браузер не поддерживает селектор nth-child. 

if (!Modernizr.nthchildn) {  
  $('.span4:even').addClass('margless');
}
4 голосов
/ 14 марта 2012

Ваш вопрос указывает, что вы хотите, чтобы столбцы автоматически переносились на следующую строку, но в сеточной системе Bootstrap .span специально разработаны для работы в .row, это сетка. Вы вообще не используете .row s в своем коде. Поэтому я предлагаю, чтобы вы оставались верными сетке, чтобы ваш код выглядел примерно так: 

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

Вот jsfiddle, который показывает пример OP и другой для ясности. http://jsfiddle.net/qJ55V/5/

Вы должны использовать .row (не .row-fluid), чтобы применить унаследованные стили к каждому столбцу (диапазону). Да, это дополнительная разметка, но не использование .row, к сожалению, приведет к путанице в столбцах.

3 голосов
/ 28 февраля 2012

Возможно, это не самое элегантное решение, но я просто определяю новый класс CSS в своей пользовательской таблице стилей, например: 

.margless{
    margin:0 !important;
}

Затем я применяю его к любому элементу, который не хочет иметь поля,Я столкнулся с тем же с помощью начальной загрузки и не смог найти альтернативное решение.

...