Bootstrap, внесение адаптивных изменений в макет

Я использую гибкий макет Twitter Bootstrap для своего дизайна и собираюсь сделать его адаптивным. Рассмотрим такую сетку:

<div class="row-fluid">
    <div class="span4"></div>
    <div class="span8"></div>    
</div>

Каков наилучший способ скрыть span4 и позволить span8 занимать всю ширину, чтобы использовать его, когда экран становится меньше?

Ответы на вопрос(8)

Я придумал небольшой вариант этого.

добавлятьstack-tablet класс кrow-fluid чтобы интервалы составляли по ширине планшета, а не только по ширине телефона (загрузчик по умолчанию):

@media (max-width: 979px) {
    .row-fluid.stack-tablet [class*="span"] {
        width: 100%;
        display: block;
        float: none;
        margin-left: 0;
    }
}

Может использоваться вместе с отображением и скрытыми классами.

If using bootstrap 2.2.1 you can:

Измените HTML на:

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8"></div>    
</div>

Теперь добавьте это к вашим переопределениям CSS:

@media (min-width: 768px) and (max-width: 979px) 
{
    [class*="span"],
    .row-fluid [class*="span"] {
        display: block;
        float: none;
        width: 100%;
        margin-left: 0;
    }
}

This will also work for any other span widths you have specified in your html.

Эффект этих изменений делает ширину всех промежутков 100%, заставляя iPad всегда использовать режим с 1 колонкой в портретном режиме.

 15 февр. 2013 г., 13:02
Эй, очень нравится этот ответ, но что, если у вас есть 3 пролета, и вы просто хотите, чтобы один промежуток занимал остальное пространство?

Это было бы лучшим вариантом, чтобы сохранить динамику. В моем примере я установил ширину в 6 столбцов рядом с FluidGridColumnWidth.

[class*="span"]  {
    width: 100%;

    .row-fluid {
        [class*="span"] {
            width: (@fluidGridColumnWidth * 6) + (@fluidGridGutterWidth * (6 - 1)) - (.5 / @gridRowWidth * 100 * 1%);

            float: left;
            margin-left: @fluidGridGutterWidth;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}

TLDR: Use the 2nd code snippet

Bootstrap - это первый мобильный фреймворк, поэтому я объясню его с самого маленького размера экрана. Макет всегда имеет ширину 12 столбцов независимо от точек останова / размера экрана.

Начиная с самой маленькой точки останова (xs - очень маленькая),span4 скрыт иspan8 занимает всю ширину (все 12 столбцов)

<div class="row-fluid">
    <div class="span4 hidden-xs"></div>
    <div class="span8 col-xs-12"></div>    
</div>

Мы еще не закончили, так как мы не определили поведение при достижении следующей точки останова (см / маленький / ширина экрана превышает 767 пикселей), поэтому мы сделаемspan4 взять треть ширины (12 столбцов / 3 = 4 столбца) иspan8 займет оставшуюся ширину (12-4 = 8 столбцов)

<div class="row-fluid">
    <div class="span4 hidden-xs col-sm-4"></div>
    <div class="span8 col-xs-12 col-sm-8"></div>    
</div>

Вышеприведенное предполагает, что вы хотели, чтобы изменение произошло при изменении между точками останова xs - sm.

Further reading:

Если вы хотите изменить значение sm-md (md = medium), я мог бы использоватьвидимой мкр класс, который покажетspan4 на контрольных точках среднего и выше (& gt; 992px)

<div class="row-fluid">
    <div class="span4 visible-md col-md-4"></div>
    <div class="span8 col-xs-12 col-md-8"></div>    
</div>

просто:

<div class="row-fluid">
   <div class="span4 hidden-desktop"></div>
   <div class="span8"></div>    
</div>
Решение Вопроса

Использование медиазапроса с минимальной / максимальной шириной.span4 вdisplay: none;

Затем добавьте.span8 к правилу для.span12 за все, что ниже ширины, которую вы прячете.span4 так как вся эта работа уже сделана для вас с помощью начальной загрузки, поэтому не нужно дублировать. Это будет выглядеть примерно так:

@media (min-width: 320px){
    .span12,
    .span8 {
        width: 300px;
    }
}

(Этот последний фрагмент кода является лишь примером, но что-то вроде этого будет в скаффолдинге начальной загрузки.)

Надеюсь, это поможет :)

EDIT:

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

@media (min-width: 320px){

    #special .span4 {
        display: none;
    }

    #special .span8 {
        float: none;
        width: auto;
    }

}
 15 июн. 2012 г., 10:40
Я обновил свое решение, оно должно быть немного лучше, и, надеюсь, без дублирования.
 14 июн. 2012 г., 19:10
Я бы предпочел использовать Id вместо отображения: ни один на .span4, но хороший ответ. +1
 C. E.14 июн. 2012 г., 19:28
span12 / span8 используются во всем проекте, в боковых панелях / подсетках и так далее. Поэтому мне нужно применить идентификатор к этому столбцу и использовать медиазапросы, чтобы сказать «теперь будет span8», «теперь будет span12». Только в Bootstrap классы сетки создаются динамически, как ~ & quot; span @ {index} & quot; {штука} для различных индексов (использующих рекурсивную конструкцию), и поэтому они на самом деле не существуют, и я не могу использовать LESS, чтобы включить их в мое определение идентификатора. Это означает, что я должен продублировать код и по существу воссоздать сетку, я не слишком доволен этим. Но ваше решение работает, хотя, спасибо.

С начальной загрузкой 2.0.2 и выше вы можете:

Измените HTML на:

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8 span12-tablet"></div>    
</div>

(Я интерпретировал «меньше» с размерами планшета и телефона, используйте ваши собственные определения для других размеров)

.hidden-phone и .hidden-tablet скрывают span4 для небольших экранов.

Чтобы освободить это пространство и заново охватить span8, добавьте это в ваш css:

@media (max-width: 979px) {
  .span12-tablet {
    width: 91.48936170212765% !important;
    *width: 91.43617021276594% !important;
  }
}

Если вы используете меньше, вы можете использовать сеточные миксины начальной загрузки:

.span12-tablet {
    @media (max-width: 979px) {
        #grid > .fluid > .span(12) !important;
    }
}
 14 авг. 2013 г., 20:17
+1 Вы правы! Просто получил это работает. Спасибо.
 05 сент. 2013 г., 16:09
Мне действительно нравится название, которое вы выбрали, "span12-tablet". Очень хорошо вписывается в другие классы начальной загрузки, такие как скрытый планшет, видимый планшет и т. Д.
 14 авг. 2013 г., 05:30
@ Герт-Ян ван де Стрик, как ты пришел к этим% значениям?
 14 авг. 2013 г., 03:57
@ Legend не могли бы вы иметьvisible-desktop span4 под этим?
 22 июл. 2013 г., 01:34
Можете ли вы также предложить, как изменить то, что отображается? Используяhidden-phone Я могу скрыть этот div без сомнения, но как я могу вместо этого заменить его чем-то другим?

Напишите как это

в устройстве телефона этот div будет скрывать<div class="span4 hidden-phone"></div>

и этот div покажет<div class="span8 visible-phone"></div>

Update

Предыдущий ответ для Bootstrap 2.3

Теперь bootstrap 3 поступит в продажу ..

поэтому я обновляю свой ответ для нового пользователя & # x2192; bootstrap3

в устройстве телефона этот div будет скрывать<div class="col-md-4 hidden-xs"></div>

и этот div покажет<div class="col-xs-4 visible-xs"></div>

 14 февр. 2014 г., 14:10
Я обновляю свой ответ
 27 июн. 2013 г., 14:07
вам не нужен тег @media
 09 янв. 2014 г., 11:40
Теперь есть hidden-lg, hidden-md, hidden-sm, hidden-sx. Также, если вы прячете span4, а span8 - блок, если он не плавающий. В этом должно быть число с плавающей точкой. Так что это решение не будет работать таким образом.

Ваш ответ на вопрос