Как добавить заполнение в контейнер в Skeleton Framework?

Я использую Skeleton Framework (http://getskeleton.com) и хочу страницу, которая имеет цвет фона и страницу белого контейнера.

Если я добавлю .container {padding:0 10px;} макет ломается при изменении размера окна для небольших устройств. Надеюсь, мне здесь не хватает чего-то очень очевидного. Как я могу добавить отступы к контейнеру, не нарушая адаптивный дизайн?

Источник

5 ответов

Мое решение этого было найдено здесь, если я правильно понимаю ваш пост.

Так как у этого есть белый фон, я хочу немного отступа внутри коробки. Достаточно просто: я добавил внутреннюю часть родительского и соответствующим образом стилизовал ее с отступом: 10px и белый фон.

CSS

div.inner {
    padding: 4px 4px 8px 12px;
    overflow:auto;
}

HTML

<div id="what_you_think" class="realm eight columns alpha"> 
    <div class="inner">
        <h3>You are <font style="color:black;">not</font>...</h3>

    </div>
</div>

Результат

http://home.grandecom.net/~scottmorse/

Источник

Я мог бы неправильно понять вашу проблему, но вы пытались добавить поля вместо заполнения, например.

      <div class="two-thirds column">
          <div class="content">
              Your text etc here
          </div>
      </div>

где класс контента имеет значение margin-left:10px;

Источник

Это неудачно со скелетом.

Обратите внимание, что каждый из ваших классов.container.column и.container.columns имеет отступ в 10 пикселей. Правильно вложив столбцы в контейнеры, вы получите постоянное заполнение.

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

Наконец, вы можете взломать основные классы в skeleton.css, добавив необходимые отступы к каждому элементу и уменьшив их ширину.

Источник

Вам нужно отредактировать skeleton.css (или переопределить его своей таблицей стилей) для небольших медиазапросов.

Закомментируйте правило, которое удаляет заполнение и уменьшает правило.container .one.column (и т. Д.) На 20 пикселей. Это оставит вас с правильным размером и хорошим 10px полем с обеих сторон.:)

    /* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
    .container { width: 300px; }

    /* removed to maintain margins
    .container .columns,
    .container .column { margin: 0; } */

    .container .one.column,
    .container .one.columns,
    .container .two.columns,
    .container .three.columns,
    .container .four.columns,
    .container .five.columns,
    .container .six.columns,
    .container .seven.columns,
    .container .eight.columns,
    .container .nine.columns,
    .container .ten.columns,
    .container .eleven.columns,
    .container .twelve.columns,
    .container .thirteen.columns,
    .container .fourteen.columns,
    .container .fifteen.columns,
    .container .sixteen.columns,
    .container .one-third.column,
    .container .two-thirds.column  { width: 280px; } /* this was reduced by 20px */
}

Кроме того, мне нужно написать решение для ширины устройства 601px для Nexus 7.

Источник

Вы можете добавить заполнение, если вы используете размер блока для любого DIV, к которому вы хотите добавить заполнение. Это вычислит ширину div с учетом заполнения.

.someElementInSkeletonGrid {
    box-sizing: border-box;
}

Я смог успешно добавить заполнение в Skeleton DIV с помощью этого. Поддержка браузера тоже довольно хорошая.

Подробнее: http://css-tricks.com/box-sizing/

Поддержка браузера: http://caniuse.com/

Источник
Другие вопросы по тегам