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


134

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


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 не потрібно) ..

Демонстрація завантажувача 3.1


13
Вам потрібно бути обережним. У рядку є поле -15px зліва та справа. Це компенсується контейнером, який має накладку 15 пікселів. Найкращий спосіб - додати цю підкладку до повного контейнера, а потім використати рядки та знаки для створення сітки.
rootman

6
@rootman Я використовую class = "контейнер-повний контейнер", і це, здається, працює.
Кенмор

Використовуйте контейнер-рідина разом з col-md-12, щоб отримати рядок у повному розмірі. Буде жолоб (стандартний 15 пікс на кожній стороні), який потрібно видалити. Найпростіший спосіб - видалити його вручну, використовуючи такий спеціальний css: #SomeId div {padding-left: 0; padding-right: 0; }
Мартін

2
Дякую за пораду ... контейнер-рідина добре працював для мене, інших змін не потрібно. У жолобі не виникло проблем, оскільки встановлення кольору тла класу, що міститься, надає кольорові кольори за бажанням, в той час як текст та інші елементи приємно зміщуються, також за бажанням.
Кришна Гупта

30

Це повна основна структура для розміщення на 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>

Щоб побачити результат самостійно, я створив завантажувальну систему. Дивіться прямий вихід там. http://bootply.com/82136 І повний базовий завантажувальний інструмент 3 100% -ної ширини макета я створив суть. ви можете використовувати це. Дістаньте суть звідси

Відповідь, якщо вам потрібна додаткова допомога. Дякую.


20
Це рішення додає горизонтальну смугу прокрутки у FF через маржу вказівника. Документи завантажувальної програми говорять про те, що .row завжди повинен використовуватися всередині контейнера через це. Люди, які прагнуть створити повністю текучі макети (маючи на увазі, що ваш сайт розтягується на всю ширину вікна перегляду), повинні загортати вміст сітки в елемент, що містить вміст із набиванням: 0 15px; для зміщення поля: 0 -15px; використовується на .row. - getbootstrap.com/css/#grid-intro
nealio82

5
Неліо правильний. Ви все одно повинні використовувати контейнер. Я загортаю мої ряди на повну ширину в .container-full з цією декларацією CSS:.container-full { padding: 0 15px; }
tbeseda

3
Це здається помилкою у завантажувальній програмі. Я вирішив це, додавши до елемента контейнера, де розміщені ваші повноекранні рядки, наступне: padding: 0 15px; margin-left: 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>

20

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

  • Рядки повинні бути розміщені в .container (фіксованої ширини) або .container-fluid (повна ширина) для правильного вирівнювання та набивання.
  • Використовуйте рядки для створення горизонтальних груп стовпців.

Якщо не використовувати стовпці сітки, це нормально, як зазначено тут:

  • Вміст має бути розміщений у межах стовпців, і лише стовпці можуть бути безпосередньо дітьми рядків.

І дивлячись на цей приклад, ви можете прочитати цей текст:

Повна ширина, один стовпець : Не потрібно класів сітки для елементів повної ширини.

Ось живий приклад, який показує деякі елементи, використовуючи правильний макет. Таким чином, вам не потрібен спеціальний CSS або хак.


5

У BOOTSTRAP 4 ви можете використовувати

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

... якщо ви просто використовуєте .row без .m-0 як діва верхнього рівня, у вас з’явиться небажаний запас, що робить сторінку ширшою за вікно браузера і спричиняє горизонтальну смугу прокрутки.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.