it-swarm.com.ru

Сетка Twitter Bootstrap 3, изменение точки останова и удаление отступов

Я пытаюсь перейти на новую сетку Boostrap 3, и я сталкиваюсь с некоторыми трудностями.

  1. Как заставить сетку укладываться ниже 480px, но не между 480px и 768px?
  2. выше 768 пикселей отступы слева от первого и справа отступа последнего находятся за пределами контейнера, но ниже 768 пикселей отступы находятся внутри контейнера, поэтому внешний вид отличается, так как содержимое больше не выровнено с контейнером, который может быть выше.
  3. когда сетка складывается, отступы остаются, но для меня это должно быть в 0.

Любая помощь будет приветствоваться Я использую код ниже с начальной загрузкой 3 RC1

    <div class="container" style="background-color: purple;">
container

</div>

<div class="container">
    <div class="row">
        <div style="background-color: red" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
        <div style="background-color: blue" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
        <div style="background-color: green" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
    </div>
</div>
9
fred_

обновление январь 2014

Смотрите также: https://github.com/twbs/bootstrap/issues/10203

update 21 авг 2013 Начиная с Twitter Bootstrap 3 RC2 упомянутое ниже col- * было переименовано в xs-col - * Теперь существует четыре класса сетки: xs-col- * (мобильный, никогда стеки), col-sm- * (планшет, стеки ниже 768 пикселей), col-md- * (ноутбуки, стеки ниже 992 пикселей) и col-lg- * (рабочий стол, стеки ниже 1200 пикселей).

ОбновлениеВ моем предыдущем ответе я использую эту таблицу из последних документов:

[старое изображение удалено]

Когда я проверяю эти значения, если нашел что-то другое: </ strike>

Bootstrap 3 Grid

  • «col-xs- *» будет применяться всегда (никогда не складывается)
  • «col-sm- *» будет применяться между 768 и выше (992px) (стеки на 767) 
  • «col-lg- *» будет применяться между 992 и выше (стеки на 991)

В variables.less вы найдете:

// Media queries breakpoints
// --------------------------------------------------

// Tiny screen / phone
@screen-tiny:                480px;
@screen-phone:               @screen-tiny;

// Small screen / tablet
@screen-small:               768px;
@screen-tablet:              @screen-small;

// Medium screen / desktop
@screen-medium:              992px;
@screen-desktop:             @screen-medium;

Но, по-видимому, не существует точки останова на 480px (или, поскольку @fred_ говорит, что в сетке отсутствует набор классов col-ts- * (от крошечного до малого)). Смотрите также: https://github.com/twbs/bootstrap/issues/9746

Чтобы установить размер стека на 480px, вам придется перекомпилировать ваш CSS. Установите @ screen-small на 480px; и определите ваши cols с помощью: <div style="background-color: red" class="col-sm-4"> после этого. Обратите внимание, что это изменит @ grid-float-breakpoint, так как оно определено как @grid-float-breakpoint: @screen-tablet;.

При добавлении строки в контейнер я не нахожу проблем с заполнением.

Или попробуйте: http://www.bootply.com/70212 он будет помещен ниже 480px путем добавления медиазапроса (javascript используется только для иллюстрации)

предыдущий ответ

Отныне Bootstrap в Твиттере определяет три сетки: Крошечная сетка для телефонов (<480 пикселей), Маленькая сетка для планшетов (<768 пикселей) и Средняя-большая сетка для Destkops (> 768 пикселей). Префиксы класса строки для этой сетки: «.col-», «.col-sm-» и «.col-lg-». Средняя-большая сетка будет иметь ширину экрана ниже 768 пикселей. Как и малая сетка ниже 480 пикселей, и крошечная сетка никогда не складывается.

С вашим префиксом "col-4" сетка никогда не будет складываться. Так что удалите «col-4», чтобы ваша сетка укладывалась ниже 480px. Это также уберет отступы, потому что теперь стеки.

Смотрите также: http://bassjobsen.weblogs.fm/migrate-your-templates-from-Twitter-bootstrap-2-x-to-Twitter-bootstrap-3/ и Написание начальной загрузки Twitter с обновлением до v3 в виду

16
Bass Jobsen
  1. Используйте класс .col-ts-12 для всех 100% divs ниже 480px и поместите этот код в конец bootstrap.css:

    @media (max-width: 480px) { 
        .col-ts-12 { float: none; }
    }
    
4
otopic

Чтобы реализовать какие-либо изменения для маленьких и маленьких устройств, вам нужно будет включить собственные медиазапросы, чтобы добавить свои собственные дополнительные точки останова.

Например:

@media (max-width: 480px) { 
   .no-float {
       display:block;
       float:none;
       padding:0;
   }
}

Я не совсем уверен, что вы пытаетесь достичь с этим, но именно так вы бы применили стили, где ширина экрана ниже 480px.

0
Daniel West