Блог

Главная - Вопросы по программированию - Сетка начальной загрузки: col-xs-1 всегда укладывается

Сетка начальной загрузки: col-xs-1 всегда укладывается

#twitter-bootstrap

#twitter-bootstrap

Вопрос:

Я использую Bootstrap 232, и у меня есть следующий код:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <link href="less/bootstrap.less" rel="Stylesheet" />

</head>
<body>
    <div class="container">
        <div class="row">
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
        </div>
     </div>
</body>
</html>

Я ожидаю, что столбцы будут отображаться в одной строке (мое разрешение 1920×1080), но каждый столбец отображается в новой строке. Не могли бы вы, пожалуйста, сказать мне, если я что-то пропустил?

Спасибо

Ответ №1:

Если вы используете Bootstrap 2.3.2, то вы должны использовать его таким образом:

 <div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

Пожалуйста, посмотрите эту ссылку:

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Если у вас есть еще какие-либо вопросы, ответьте на этот комментарий, иначе примите это как ответ.

Ответ №2:

Ваша разметка HTML для столбцов относится к Bootstrap 3! Вам нужно либо использовать Bootstrap 3 (здесь ), либо изменить разметку HTML с .span1 на .span12 (см. Здесь )

Ответ №3:

Вы используете язык Bootstrap 3.1, в то время как ваш исходный Bootstrap — 2.3.

Просто обновите свой Bootstrap, чтобы он работал должным образом. Посмотрите на эту скрипку

Самый простой способ проверить это — вызвать Bootstrap извне из MaxCDN вот инструкции.

Замените ссылку на вашу таблицу стилей следующим образом:

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

Комментарии:

1. Большое спасибо, я использовал 2.3.2 и учебник для Bs 3.

2. @ansurajKhadanga тоже прав, если вы хотите придерживаться Bootstrap 2.3, но я рекомендую обновление.

Метки: