Wrapper css html: Как стилизовать wrapper в CSS

html — Для чего теги «оборачивают» Wrapper’ом?

Вопрос задан 7 лет 1 месяц назад

Изменён 5 лет 2 месяца назад

Просмотрен 31k раз

Для чего теги «оборачивают» Wrapper’ом и почему у Wrappera часто ставят position:relative? Что вообще дает использование wrapper’а?

• html
• css

4

Это может быть связано с position:absolute для вложенного элемента. Дело в том, что без обёртки с position:relative координаты такого элемента будут отсчитываться относительно всего документа, а с обёрткой — относительно обёрточного элемента.

Это всего лишь контейнер для удобства, заключая блоки в обертку проще центрировать, задавать общую ширину.

…. и т.д. Релейтив ставят если собираются абсолютно позиционировать внутренние блоки.

В целом, wrapper используют для удобства позиционирования. Самому wrapper, присваивают минимум свойств.

Например:

.wrapper { max-width: 960px; padding-right: 10px; padding-left: 10px; }

А иногда вообще оставляют его без них. Почему просто не оставлять див без класса? Во первых, противоречит некоторым методологиям (например БЭМ). Во вторых, слово «wrapper» переводится как «обертка» и дает понять, тем кто будет работать с кодом после вас, зачем этот div нужен (при беглом просмотре). Также, он может послужить прослойкой для функционирования различных скриптов.

Исчерпывающая статья

Банальный пример… Допустим нам надо чтобы блок вытягивался снизу верх, но при этом должен быть где-то в середине… И тут без обертки не обойтись… Потому, что ему надо задать абсолютное позиционирование и bottom: 0;… Но без обертки его абсолютное позиционирование будет относительно body и будет выглядеть так.

..

div {
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 50px;
  background: red;
  transition: all .5s;
}

div:hover {
  height: 100px;
}

<div></div>

---

А с оберткой то, что надо…

#wrap {
  position: relative;
  top: 100px;
  width: 200px;
  height: 50px;
  background: red;
}

#wrap>div {
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 50px;
  background: red;
  transition: all .5s;
}

#wrap>div:hover {
  height: 100px;
}

<div>
  <div></div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Есть ли класс wrapper для bootstrap?

Вопрос задан

5 лет 5 месяцев назад

Изменён 5 лет 3 месяца назад

Просмотрен 2k раз

Есть ли в bootstrap обертка (wrapper) для странички(HTML)?
Может быть неправильно задал вопрос, но мне нужно сделать общий padding для странички.

• html
• css
• вёрстка
• bootstrap
• адаптивная-верстка

1. У бутстрапа нет общей обертки.

2. Если вы хотите задать вертикальный внутренний отступ, то спокойно можете добавить его к body.

3. Если вы хотите задать горизонтальный отступ:

a) Если вы планируете сделать отступ больше чем половина gutter, то можете просто добавить эти отступы для container

. В 4 бутстрапе только для отступов есть отдельные классы. Таким образом вы можете обойтись только средствами бутсрап:

span {
  display: block;
  padding: 5px;
  margin-top: 5px;
  border: 1px solid #ddd;
  background: #eee;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div>
  <div>
    <div>
      <span>1 of 2</span>
    </div>
    <div>
      <span>2 of 2</span>
    </div>
  </div>
  <div>
    <div>
      <span>1 of 3</span>
    </div>
    <div>
      <span>2 of 3</span>
    </div>
    <div>
      <span>3 of 3</span>
    </div>
  </div>
</div>

б) Можно поменять в переменных основной отступ — тогда изменятся паддинги у контейнера, маргины у row, и паддинги у col и соответсвенно изменится отступ между колонками. В третьем бустрапе для этого можно воспользоваться кастомизатором.

в) Если вы планируете сделать отступ меньше чем половина gutter и оставить прежнее расстояние между колонками, тогда можно обернуть содержимое во wrapper c отрицательным оступом и добавить странице горизонтальный overflow, тогда следует помнить, что содержимое может обрезаться и чуть внимательнее относитесь к этому при тестировании.

г) Так же в бустрапе есть возможность делать колонки без отступа .no-gutter — тогда ваши паддинги у контейнера могут быть любой ширины.

Судя по поиску его там нет, вы это можете проверить простым поиском в файлах

bootstrap. Остаётся только создать самому.

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как правильно сделать оболочку CSS?

Лучший способ сделать это зависит от вашего конкретного варианта использования.

Однако, если мы говорим о общих рекомендациях по реализации CSS-оболочки, вот мое предложение: ввести дополнительный элемент