4

私はTwitterBootstrapをCssフレームワークとして使用しており、モニターの大部分が現在解像度になっているときに効果的に使用できるのに、なぜそのスペースを無駄にする1280 X nのか考えています。私はBootstrapが大好きなので、今すぐ停止して、大画面用のcss（または上司が望むフルスクリーン幅）を作成するプロセス全体をやり直したくありません。

ハックを変更/変更したり、名前を付けたりすることは可能ですか？cssファイルをフルスクリーンまたは現在使用している940pxではなく1200Px以上のサイズに調整することはできますか？

4

3 に答える 3

2

それは簡単でした。TwitterBootstrapのスタイリングに優れたものをすべて使用しましたが、グリッドシステムを削除して、Zurb Foundation Grid System ここに置き換えました。モバイルブラウザ用にサイトを再度実装しないことで余分な時間を稼ぐ以外に失うものは何もありませんでした。SOコミュニティに感謝します。

于 2011-12-22T17:17:55.587 に答える
0

これを行ったもう1つの方法は、IDがのdivを作成しfluid-span、次のJQueryを使用して適切な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);
});

基本的には、適切なスパンクラスをIDが。のdivに追加しますfluid-span。これがBootstrapの固定/流体ソリューションを探している人に役立つことを願っています！

これの1つの制限は、動的ではないことです。ブラウザウィンドウのサイズを変更する場合、コードを機能させるにはページを更新する必要があります。本当のJQueryスキルを持っている人なら、これをもっとうまく書き直してそれを行うことができると確信しています:)

于 2011-12-20T22:36:24.010 に答える
0

tw-bs.cssがロードされた後、クラスに新しい値を指定します

.container {
  width: 1200px;
}
.container-fluid {
  min-width: 1200px;
}
于 2011-12-16T11:46:27.683 に答える