100% ширина Twitter Bootstrap 3 шаблон

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

4 ответов


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

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

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

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

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

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

Bootstrap 3.1 demo


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

так что просто начните писать!--1--> без класса контейнера и вы готовы пойти с 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's 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 и полный базовый bootstrap 3 100% width layout я создал суть. вы можете использовать это. Получите суть от здесь

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


используя загрузки 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>

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

  • строки должны быть помещенным в a .контейнер (фиксированная ширина) или .контейнер-жидкость (полная ширина) для правильного выравнивания и заполнения.
  • использовать строки для создания горизонтальных групп столбцов.

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

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

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

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

здесь живой пример некоторые элементы используют правильный макет. Таким образом, вам не нужен пользовательский CSS или hack.