Щебет Bootstrap 3, изменение точки останова и удаление прокладки

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

  • Как сделать сетку стека ниже 480 пикселей, но не между 480px и 768px?
  • выше 768px прокладка слева от первой и справа от последней находятся за пределами контейнера, но ниже 768px заполнение находится внутри контейнера, поэтому внешний вид отличается от того, что содержимое больше не совпадает с контейнером, который может быть выше.
  • когда стек сетки остается заполнением, но для меня оно должно быть в 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>

Ответы

Ответ 1

обновить jan 2014

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

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

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

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

Когда я тестирую эти значения, если обнаружил что-то другое:

Bootstrap 3 Grid

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

В переменных .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

Чтобы установить точку стекирования на 480 пикселей, вам придется перекомпилировать ваш 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 используется только для иллюстрации)

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

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

С вашим префиксом "col-4" сетка никогда не будет стекаться. Поэтому удалите "col-4", чтобы ваш стек сетки находился ниже 480 пикселей. Это также приведет к удалению причины заполнения, теперь это стеки.

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

Ответ 2

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

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

Ответ 3

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

Например:

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

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