Можно ли переопределить систему Grid для использования полной ширины - PullRequest
Новая
       21

Можно ли переопределить систему Grid для использования полной ширины

4 голосов
/ 16 декабря 2011

Я использую Twitter Bootstrap в качестве Css-фреймворка и думаю зачем тратить это пространство, когда я могу эффективно использовать его , когда большинство мониторов теперь имеют разрешение 1280 X n?Я так сильно люблю Bootstrap, что не хочу сейчас останавливаться и начинать заново весь процесс написания CSS для больших экранов (или ПОЛНОЙ ЭКРАННОЙ ШИРИНЫ, как хочет мой босс).

Можно ли изменить / изменить хак или назвать его, CSS-файл для настройки на полный экран или минимальный размер 1200px, а не 940px, который он использует сейчас?

Ответы [ 3 ]

2 голосов
/ 22 декабря 2011

Ну, это было легко, я использовал все хорошие вещи для стилизации из Twitter Bootstrap, но лишил Grid System вместо Zurb Foundation Grid System здесь .Мне больше нечего терять, чем выиграть дополнительное время, не внедрив сайт снова для мобильного браузера. Спасибо SO community

0 голосов
/ 21 декабря 2011

Другой способ сделать это - создать div с идентификатором fluid-span, а затем использовать следующий JQuery для применения соответствующего класса span Bootstrap к содержимому среднего столбца - по сути, это всегда делает содержимое среднего относительно размера окна просмотра браузера пользователя: 

<div class="row">

<div id="fluid-span">

[content goes here]


</div>

<div class="span4">

[this is your right sidebar content]

</div></div>

А вот JQuery: 

$(function(){
var width = $(window).width(),
new_class = width >= 1571 ? 'span17' :
            width >= 1411 ? 'span15' :
            width >= 1251 ? 'span12' :
            width >= 995 ? 'span8' : 'span8';
$('#fluid-span').removeClass('span17 span15 span12 span8').addClass(new_class);
//alert(width);
});

Что он в основном делает, так это добавляет соответствующий класс span к div с идентификатором fluid-span. Надеюсь, что это поможет любому, кто ищет фиксированное / жидкое решение для Bootstrap!

Одним из ограничений является то, что он не динамический - если вы изменяете размер окна браузера, вам нужно обновить страницу, чтобы код работал. Я уверен, что кто-то с настоящими навыками JQuery мог бы переписать это лучше, чтобы сделать это:)

0 голосов
/ 16 декабря 2011

Укажите новое значение для класса после загрузки tw-bs.css 

.container {
  width: 1200px;
}
.container-fluid {
  min-width: 1200px;
}
...