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

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

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

Любая помощь будет приветствоваться. Я использую приведенный ниже код с bootstrap 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>

css responsive-design twitter-bootstrap less twitter-bootstrap-3
person fred_    schedule 29.07.2013    source источник
comment
На самом деле для меня в сетке отсутствует набор классов col-ts- * (от крошечного до маленького)   -  person fred_    schedule 29.07.2013
comment
Это может быть вариантом для вас, если вам нужно больше контроля над «крошечными» столбцами: gist.github.com/ andyl / 6360906. Но решение @ otopic с шириной: 100%; вполне может удовлетворить потребности большинства людей в этом дополнительном / отсутствующем размере столбца / элементе управления.   -  person Matty J    schedule 05.03.2015

Ответы (3)


arrow_upward
16
arrow_downward

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

См. Также: https://github.com/twbs/bootstrap/issues/10203

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

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

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

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

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;

Но, похоже, нет точки останова на 480 пикселей (или как @fred_ говорит, что в сетке отсутствуют столбцы - * (от маленького к маленькому) набор классов). См. Также: https://github.com/twbs/bootstrap/issues/9746

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

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

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

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

Отныне Twitter Bootstrap определяет три сетки: Крошечная сетка для телефонов (‹480 пикселей), Маленькая сетка для планшетов (‹ 768 пикселей) и Средне-большая сетка для Destkops (> 768 пикселей). Префиксы классов строк для этой сетки - «.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/ и Написание Bootstrap Twitter с учетом обновления до v3

person Bass Jobsen    schedule 29.07.2013
comment
Thx Bass, но он работает. с col-4 он не складывается, без col-4 он начинает складывать 768 пикселей, я бы хотел, чтобы он начинал складывать ниже 480 пикселей и оставался горизонтальным сверху. С моей стороны, он также не удаляет прокладку - person fred_; 29.07.2013
comment
@fred_ у меня работает предложение Басса для стекирования, см. bootply.com/70143, а также обратите внимание, как выглядит заполнение, когда вы применяете цвета к одним и тем же элементам (т.е. col и col, а не container и col). - person David Taiaroa; 29.07.2013
comment
Привет, Дэвид, в вашем примере сетка начинает складываться с 768 пикселей. Цель состоит в том, чтобы он начинал складываться ниже 480 пикселей. это идея поместить строку внутри верхнего контейнера для заполнения. он не удаляет его, но выглядит более ровным. - person fred_; 29.07.2013
comment
Thx Bass, я добавлю col-ts- * к файлам less, чтобы добавить еще одну точку останова и получить большую детализацию. ваше решение с изменением @ screen-small тоже работает :) - person fred_; 29.07.2013

arrow_upward
4
arrow_downward

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

    @media (max-width: 480px) { 
    .col-ts-12 { float: none; }
}
person otopic    schedule 24.10.2013
comment
это хорошая точка останова, однако вам нужно добавить к ней width:100% - person keeg; 23.01.2014

arrow_upward
0
arrow_downward

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

Например:

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

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

person Daniel West    schedule 10.01.2014