Я использую гибкий макет Twitter-бутстрапа для моего дизайна и собираюсь сделать его отзывчивым. Рассмотрим такую сетку:
<div class="row-fluid">
<div class="span4"></div>
<div class="span8"></div>
</div>
Каков наилучший способ скрыть span4 и позволить span8 использовать всю ширину, которая будет использоваться, когда экран станет меньше?
Использование медиа-запроса с любой минимальной/максимальной шириной, установленной .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;
}
}
С помощью 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;
}
}
Если вы используете 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 колонки в портретном режиме.
Это будет лучший вариант, чтобы поддерживать динамику. В моем примере ширина ширины равна 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;
}
}
}
}
Напиши так
в телефонном устройстве этот 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>
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>
Я придумал небольшую вариацию этого.
Добавьте stack-tablet класс в row-fluid, чтобы сделать стек стеков на ширину планшета не только по ширине телефона (по умолчанию для начальной загрузки):
@media (max-width: 979px) {
.row-fluid.stack-tablet [class*="span"] {
width: 100%;
display: block;
float: none;
margin-left: 0;
}
}
Может использоваться вместе с отображаемыми и скрытыми классами.
только
<div class="row-fluid">
<div class="span4 hidden-desktop"></div>
<div class="span8"></div>
</div>