it-swarm.com.ru

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

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

130
Samia Ruponti

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

238
Zim

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

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

28
Shaharia Azam

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

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

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

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

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

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

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

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

20
gerardnll

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

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

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

1
Sandy Maier