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

134

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

html css twitter-bootstrap layout twitter-bootstrap-3 Самия Рупонти
источник

5

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

247

Для 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 демо

Zim
источник

13

Вы должны быть осторожны. Строка имеет -15px поля слева и справа. Это компенсируется контейнером с отступом 15 пикселей. Лучший способ - добавить этот отступ к вашему контейнеру, а затем использовать строки и столбцы для создания сетки.

rootman

6

@rootman Я использую class = "container container-full", и это, похоже, работает.

Кенмор

Используйте контейнер с жидкостью вместе с col-md-12, чтобы получить полноразмерный ряд. Там будет желоб (стандартные 15 пикселей на каждой стороне), который необходимо удалить. Самый простой способ - удалить его вручную, используя следующий пользовательский css: #SomeId div {padding-left: 0; обивка-направо: 0; }

Мартин

2

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

Кришна Гупта

30

Это полная базовая структура для макета 100% ширины в Bootstrap v3.0.0 . Вы не должны оборачиваться <div class="row">с containerклассом. containerКласс Cause займет много полей, и он не предоставит вам полноэкранный макет (ширина 100%), в котором bootstrap удалил класс container- Fluid из своей мобильной версии 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'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 И полный базовый бутстрап 3 100% ширины макета я создал суть. Вы можете использовать это. Получить суть здесь

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

Шахария Азам
источник

20

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

nealio82

5

Неалио прав. Вы все еще должны использовать контейнер. Я упаковываю свои строки полной ширины в .container-full с этим объявлением CSS:.container-full { padding: 0 15px; }

tbeseda

3

Это похоже на ошибку в начальной загрузке. Я решил это, добавив следующее к элементу контейнера, где размещены ваши полноэкранные строки: padding: 0 15px; поле слева: 0px; margin-right: 0px;

Джорре

2

Не все .rowли должны содержаться внутри .container?

skube

2

Эрик Флауэрс написал отличную статью об отношениях контейнер / строка, я рекомендую прочитать ее!

Idleberg

27

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

angularsen
источник

20

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

Строки должны быть помещены в .container (фиксированная ширина) или .container-liquid (полная ширина) для правильного выравнивания и заполнения.

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

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

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

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

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

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

gerardnll
источник

5

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

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

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

Феликс
источник

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

Ответы: