Бутстрап, реагирующий на макет

Ответ 1

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

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

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

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

Надеюсь, что помогает:)

EDIT:

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

@media (min-width: 320px){

    #special .span4 {
        display: none;
    }

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

}

Ответ 2

С помощью bootstrap 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;
  }
}

Если вы используете меньше, вы можете использовать бутстрап-сетку mixins:

.span12-tablet {
    @media (max-width: 979px) {
        #grid > .fluid > .span(12) !important;
    }
}

Ответ 3

Если вы используете bootstrap 2.2.1, вы можете:

Измените 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;
    }
}

Это также будет работать для любой другой ширины диапазона, указанной в вашем html.

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

Ответ 4

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

[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;
            }
        }
    }
}

Ответ 5

Напиши так

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

и этот div отобразит <div class="span8 visible-phone"></div>

Обновление

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

Теперь bootstrap 3 выйдет на рынок.

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

в телефонном аппарате этот div скроет <div class="col-md-4 hidden-xs"></div>

и этот div отобразит <div class="col-xs-4 visible-xs"></div>

Ответ 6

TL;DR: используйте второй фрагмент кода

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

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

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

Мы еще не совсем сделали, так как мы не определили поведение при ударе следующей точки останова (ширина sm/small/screen превышает 767px), поэтому мы сделаем 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.

Дальнейшее чтение:

Если вам нужно изменение между sm-md (md = medium), я могу использовать класс visible-md, который покажет span4 на промежуточных точках и вверх ( > 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>

Ответ 7

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

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

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

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

Ответ 8

только

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