Шаблон Twitter Bootstrap 3 ширины

108

Я новичок в bootstrap, и у меня есть шаблон на 100%, который я хочу скопировать с помощью начальной загрузки. Первый столбец начинается в левом углу, и у меня есть карта Google, которая простирается до самого крайнего. Я думал, что могу сделать это с классом container-fluid, но это, похоже, больше не доступно. Я понятия не имею, как достичь этого макета с помощью bootstrap 3. Я использую шаблон Geometry PSD из themeforest, ссылка здесь, если вы хотите увидеть макет: http://themeforest.net/item/geometry-design-for-geolocation-social-networkr/4752268

  • 5
    Вы можете настроить Bootstrap для использования ширины @container-* как 100%. Также .container-fluid возвращается в 3.1.0. :)
Теги:
twitter-bootstrap-3
layout

4 ответа

199
Лучший ответ

Для Bootstrap 3 вам потребуется использовать пользовательскую оболочку и установить ее ширину до 100%.

.container-full {
  margin: 0 auto;
  width: 100%;
}

Здесь является рабочим примером для Bootply

Если вы предпочитаете не добавлять пользовательский класс, вы можете получить очень широкий макет (не 100%), обернув все внутри col-lg-12 (wide макет демонстрации)

Обновление для Bootstrap 3.1

Класс container-fluid вернулся в Bootstrap 3.1, поэтому его можно использовать для создания макета полной ширины (дополнительный CSS не требуется).

Демо-версия Bootstrap 3.1

  • 12
    Вы должны быть осторожны. Строка имеет -15px поля слева и справа. Это компенсируется контейнером с отступом 15 пикселей. Лучший способ - добавить это заполнение к вашему контейнеру, а затем использовать строки и столбцы для создания сетки.
  • 5
    @rootman Я использую class = "container container-full", и это, похоже, работает.
Показать ещё 3 комментария
26

Это полная базовая структура для раскладки ширины 100% в Bootstrap v3.0.0. Вы не должны обертывать ваш <div class="row"> классом container. Класс container будет обладать множеством полей, и это не даст вам полноэкранную (100% -ную ширину) макет, где bootstrap удалил класс контейнер-жидкость из своей версии для мобильных устройств v3.0.0.

Итак, просто начните писать <div class="row"> без класса контейнера, и вы готовы пойти с компоновкой ширины 100%.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Basic 100% width Structure</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
  <script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
</style>
</head>
<body>
    <div class="row">
        <div class="col-md-3 red">Test content</div>
        <div class="col-md-9 green">Another Content</div>
    </div>
    <!-- jQuery (necessary for Bootstrap JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Чтобы увидеть результат самостоятельно, я создал bootply. Смотрите живое выступление там. http://bootply.com/82136 И полная базовая компоновка ширины 100% ширины самого начала, я создал суть. вы можете использовать это. Получите суть из здесь

Ответьте мне, если вам нужна дополнительная помощь. Спасибо.

  • 0
    благодарю вас. Это никогда не приходило мне в голову! этот работает лучше, чем предыдущее решение.
  • 20
    Это решение добавляет горизонтальную полосу прокрутки в FF из-за поля на .row. В документации по начальной загрузке сказано, что .row всегда следует использовать внутри контейнера, потому что люди, которые хотят создать полностью изменяющиеся макеты (то есть ваш сайт растягивается на всю ширину области просмотра), должны обернуть содержимое своей сетки в содержащий элемент с отступом: 0 15px; для смещения поля: 0 -15px; используется на .rows. - getbootstrap.com/css/#grid-intro
Показать ещё 6 комментариев
20

Используя Bootstrap 3.3.5 и .container-fluid, я получаю полную ширину без водосточных желобов или горизонтальной прокрутки на мобильном устройстве. Обратите внимание, что .container-fluid было повторно введено в 3.1.

Полная ширина на мобильном/планшете, экран 1/4 на рабочем столе

<div class="container-fluid"> <!-- Adds 15px left/right padding --> 
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
      <!-- Full-width for mobile -->
      <!-- 1/4 screen width for desktop -->
    </div>
  </div>
</div>

Полная ширина на всех разрешениях (мобильный, стол, рабочий стол)

<div class="container-fluid"> <!-- Adds 15px left/right padding -->
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div>
      <!-- Full-width content -->
    </div>
  </div>
</div>
18

Вы правы, используя div.container-fluid, и вам также нужен ребенок div.row. Затем содержимое должно быть размещено внутри без каких-либо столбцов сетки. Если вы посмотрите на документы, вы можете найти этот текст:

  • Строки должны располагаться внутри контейнера .container(fixed-width) или .container-fluid (full-width) для правильного выравнивания и заполнения.
  • Используйте строки для создания горизонтальных групп столбцов.

Не использовать столбцы сетки в порядке, как указано здесь:

  • Содержимое должно размещаться внутри столбцов, а только столбцы могут быть непосредственными дочерними элементами строк.

И глядя на этот пример, вы можете прочитать этот текст:

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

Вот живой пример, показывающий некоторые элементы, используя правильный макет. Таким образом, вам не нужен какой-либо пользовательский CSS или хак.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню