Вопрос по html, css, twitter-bootstrap, twitter-bootstrap-3, layout – Шаблон Twitter Bootstrap 3 ширины

128

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

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

Ваш Ответ

4   ответа
20

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

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

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

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

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

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

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

26

начальная загрузка 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>
28

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

Ответьте мне, если вам нужна дополнительная помощь. Благодарю.

Это решение добавляет горизонтальную полосу прокрутки в FF из-за поля на .row. В документации по начальной загрузке сказано, что .row всегда следует использовать внутри контейнера, потому что люди, которые хотят создать полностью изменяющиеся макеты (то есть ваш сайт растягивается на всю ширину области просмотра), должны обернуть содержимое своей сетки в содержащий элемент с отступом: 0 15px; для смещения поля: 0 -15px; используется на .rows. -getbootstrap.com/css/#grid-intro nealio82
Неалио прав. Вы все еще должны использовать контейнер. Я обертываю свои строки полной ширины в .container-full с этим объявлением CSS:.container-full { padding: 0 15px; } tbeseda
Не все.rowдолжны содержаться в пределах.container? skube
Эрик Флауэрс написал отличныйстатья о соотношении контейнер / строка рекомендую прочитать! idleberg
Это похоже на ошибку в начальной загрузке. Я решил это, добавив следующее к элементу контейнера, где размещены ваши полноэкранные строки: padding: 0 15px; поле слева: 0px; margin-right: 0px; Jorre
233

и установить ее ширину на 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 демо

Спасибо за подсказку ... контейнер-флюид работал хорошо для меня, никаких других изменений не требуется. Желоб не представлял проблемы, потому что установка цвета фона содержащегося в нем класса отображала цвет по краям по желанию, в то время как текст и другие элементы были слегка смещены, также по желанию. Krishna Gupta
Я работаю, используяpadding: 0; width:100%; xguox
Используйте контейнер-жидкость вместе с col-md-12, чтобы получить полноразмерный ряд. Там будет желоб (стандартные 15 пикселей на каждой стороне), который необходимо удалить. Самый простой способ - удалить его вручную с помощью следующего пользовательского css: #SomeId div {padding-left: 0; обивка-направо: 0; } Blizwire
Вы должны быть осторожны. Строка имеет -15px поля слева и справа. Это компенсируется контейнером с отступом 15 пикселей. Лучший способ - добавить это заполнение к вашему контейнеру, а затем использовать строки и столбцы для создания сетки. rootman
@rootman Я использую class = "container container-full", и это, похоже, работает. Kenmore

Похожие вопросы