Смещения не работают при использовании "row-fluid" в Twitter Bootstrap

Я использую Bootstrap-Twitter, и всякий раз, когда я пытаюсь использовать строки жидкости, смещения на прогонах не работают. Вот код:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="well span4 offset4">
            Content here
        </div>
    </div>
</div>

И все, что происходит, - это то, что ядро ​​ не компенсирует на 4 пробела. Я разобрался с ним, но не нашел ясного ответа. У кого-нибудь есть проблема?

Ответы

Ответ 1

Проблема была поднята в Github, и, согласно разработчикам Bootstrap, исправление поступит со временем, поэтому я предполагаю, что пока вы в основном приходится полагаться на хаки. Два способа сделать это - добавить класс .offset в класс .row-fluid (если это сработает для вас) или добавить класс .offset по вашему выбору в таблицу стилей и объявить его с помощью свойства !important, вот так:

.offset4 {
    margin-left: 340px !important;
}

Ответ 2

Я бы не использовал свойство !important в существующем классе смещения, так как он определяет значение пикселя, а весь смысл использования жидкости - использовать проценты.

Вот формула, которую я придумал для создания собственного смещения для рядов жидкости.

@for $i from 1 through 12 {
  .row-fluid .offset#{$i} {
    margin-left: (6.382978723% * $i) + (2.127659574% * $i);
    *margin-left: (6.329787233638298% * $i) + (2.0744680846382977% * $i);
  }
}

Итак, позвольте мне объяснить, что вы здесь видите. Это цикл for, использующий SCSS, используемый для записи классов offset1 - offset12. Это только для одного мультимедийного запроса, так как вам нужно определить его определение 3 раза (поскольку ширины и смещения изменяются в трех отдельных медиа-запросах в коде загрузки twitter). Основной принцип таков:

margin-left = (width_of_span1 * x) + (margin-left_of_row-fluid_span* * x)

Значение x равно количеству столбцов, которые вы хотите компенсировать, поэтому для .offset1 вы использовали бы 1 как значение x. Для .offset12 вы использовали бы 12 как значение x.

Вам также нужно будет настроить еще один стиль, так как twitter bootstrap помещает margin-left: 0 в элемент :first-child в контейнере .row-fluid. Теперь самый простой способ - просто добавить атрибут !important к вновь объявленным классам .row-fluid .offset*. Вы также можете настроить селектор :first-child так, чтобы он читал:

.row-fluid [class*="span"]:first-child:not([class*=offset])

Это применит только к margin-left: 0, если элемент .span* не имел ни одного из классов .offset*. Хотя, поддержка браузером такого типа, вероятно, довольно ограничена.

Ответ 4

Вот что я делаю:

<div class="row-fluid">
  <div class="span4"></div>
  <div class="span4">
    Content here
  </div>
</div>