100% ширина Twitter Бутстрап 3 шаблон

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

Ответ 1

Для 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

Ответ 2

Это полная базовая структура для раскладки ширины 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% ширины самого начала, я создал суть. вы можете использовать это. Получите суть из здесь

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

Ответ 3

Используя 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>

Ответ 4

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

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

Используйте строки для создания горизонтальных групп столбцов.

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

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

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

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

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

Ответ 5

В BOOTSTRAP 4 вы можете использовать

<div class="row m-0">
my fullwidth div
</div>

... если вы просто используете .row без .m-0 в качестве div верхнего уровня, у вас будет нежелательное поле, которое сделает страницу шире, чем окно браузера, и приведет к горизонтальной полосе прокрутки.