Twitter Bootstrap ".container" класс: как использовать его семантически?

Question

Однажды я решил поиграть с Twitter Bootstrap. Нашел это фантастически хорошо разработанным, но я не поклонник всех тех классов, загрязняющих мой HTML.

Поэтому я пытаюсь использовать Less, чтобы сделать его более семантическим. Я неплохо справлялся, пока не перешёл класс .container. В файле "mixins.less" есть строка mixin (строка 580), которая устанавливает ширину контейнера. Но я не могу заставить его работать без включения класса непосредственно в HTML. Я всегда получаю ошибки компиляции, когда помещаю его в свой файл. Я попытался скопировать и вставить это в мой файл, но безуспешно... кто-нибудь прошел через это?

Конечно, я мог бы принудительно увеличить ширину вручную, но я не думаю, что это будет лучшим подходом. Есть идеи?

Answer 1

На сегодняшний день это лучшее лечение, которое я нашел. Заимствуя от авторов примеры:

Большинство людей используют это:

<div class="row">
  <div class="span6">...</div>
  <div class="span6">...</div>
</div>

Если вы похожи на меня, то вы пытаетесь добраться до этого:

<!- our new, semanticized HTML -->
<div class="article">
  <div class="main-section">...</div>
  <div class="aside">...</div>
</div>

<!-- its accompanying Less stylesheet -->
.article {
  .makeRow();        // Mixin provided by Bootstrap
  .main-section {
    .makeColumn(10); // Mixin provided by Bootstrap
  }
  .aside {
    .makeColumn(2); // Mixin provided by Bootstrap
  }
}

Answer 2

Проблема с ответом выше заключается в том, что миксины makeRow() и makeColumn() не реагируют. Я с нетерпением ждал написания семантических имен классов, но я не увидел результатов, как при написании, например, имен строк и классов span6 offset1.

Вы можете проверить https://github.com/twitter/bootstrap/issues/2242 чтобы получить больше информации.