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)..
Это полная базовая структура для 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.