http://twitter.github.com/bootstrap/scaffolding.html#responsiveを見ると、ほぼすべてのデバイスのカテゴリがあります。最後のサポート デバイス エントリを削除したい:
Large display 1200px and up 70px 30px
私はデザイナーではなくバックエンド プログラマーなので、CSS の知識は限られています。大きなディスプレイのサポートを取り除くために変更する必要があるファイルを教えてもらえますか?
ありがとう！
（PSなぜ私がこれを行うのか疑問に思っている人がいれば、それは企業標準の何とか何とか何とか1024px何とかです。）
ブートストラップの maxcdn バージョンを使用している場合、または単にソースに触れたくない場合は、ブートストラップ スタイルシートをロードした後、次の css を貼り付けてください。
@media (min-width: 1200px) {
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";
line-height: 0;
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin-left: 2.127659574468085%;
*margin-left: 2.074468085106383%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .controls-row [class*="span"] + [class*="span"] {
margin-left: 2.127659574468085%;
}
.row-fluid .span12 {
width: 100%;
*width: 99.94680851063829%;
}
.row-fluid .span11 {
width: 91.48936170212765%;
*width: 91.43617021276594%;
}
.row-fluid .span10 {
width: 82.97872340425532%;
*width: 82.92553191489361%;
}
.row-fluid .span9 {
width: 74.46808510638297%;
*width: 74.41489361702126%;
}
.row-fluid .span8 {
width: 65.95744680851064%;
*width: 65.90425531914893%;
}
.row-fluid .span7 {
width: 57.44680851063829%;
*width: 57.39361702127659%;
}
.row-fluid .span6 {
width: 48.93617021276595%;
*width: 48.88297872340425%;
}
.row-fluid .span5 {
width: 40.42553191489362%;
*width: 40.37234042553192%;
}
.row-fluid .span4 {
width: 31.914893617021278%;
*width: 31.861702127659576%;
}
.row-fluid .span3 {
width: 23.404255319148934%;
*width: 23.351063829787233%;
}
.row-fluid .span2 {
width: 14.893617021276595%;
*width: 14.840425531914894%;
}
.row-fluid .span1 {
width: 6.382978723404255%;
*width: 6.329787234042553%;
}
.row-fluid .offset12 {
margin-left: 104.25531914893617%;
*margin-left: 104.14893617021275%;
}
.row-fluid .offset12:first-child {
margin-left: 102.12765957446808%;
*margin-left: 102.02127659574467%;
}
.row-fluid .offset11 {
margin-left: 95.74468085106382%;
*margin-left: 95.6382978723404%;
}
.row-fluid .offset11:first-child {
margin-left: 93.61702127659574%;
*margin-left: 93.51063829787232%;
}
.row-fluid .offset10 {
margin-left: 87.23404255319149%;
*margin-left: 87.12765957446807%;
}
.row-fluid .offset10:first-child {
margin-left: 85.1063829787234%;
*margin-left: 84.99999999999999%;
}
.row-fluid .offset9 {
margin-left: 78.72340425531914%;
*margin-left: 78.61702127659572%;
}
.row-fluid .offset9:first-child {
margin-left: 76.59574468085106%;
*margin-left: 76.48936170212764%;
}
.row-fluid .offset8 {
margin-left: 70.2127659574468%;
*margin-left: 70.10638297872339%;
}
.row-fluid .offset8:first-child {
margin-left: 68.08510638297872%;
*margin-left: 67.9787234042553%;
}
.row-fluid .offset7 {
margin-left: 61.70212765957446%;
*margin-left: 61.59574468085106%;
}
.row-fluid .offset7:first-child {
margin-left: 59.574468085106375%;
*margin-left: 59.46808510638297%;
}
.row-fluid .offset6 {
margin-left: 53.191489361702125%;
*margin-left: 53.085106382978715%;
}
.row-fluid .offset6:first-child {
margin-left: 51.063829787234035%;
*margin-left: 50.95744680851063%;
}
.row-fluid .offset5 {
margin-left: 44.68085106382979%;
*margin-left: 44.57446808510638%;
}
.row-fluid .offset5:first-child {
margin-left: 42.5531914893617%;
*margin-left: 42.4468085106383%;
}
.row-fluid .offset4 {
margin-left: 36.170212765957444%;
*margin-left: 36.06382978723405%;
}
.row-fluid .offset4:first-child {
margin-left: 34.04255319148936%;
*margin-left: 33.93617021276596%;
}
.row-fluid .offset3 {
margin-left: 27.659574468085104%;
*margin-left: 27.5531914893617%;
}
.row-fluid .offset3:first-child {
margin-left: 25.53191489361702%;
*margin-left: 25.425531914893618%;
}
.row-fluid .offset2 {
margin-left: 19.148936170212764%;
*margin-left: 19.04255319148936%;
}
.row-fluid .offset2:first-child {
margin-left: 17.02127659574468%;
*margin-left: 16.914893617021278%;
}
.row-fluid .offset1 {
margin-left: 10.638297872340425%;
*margin-left: 10.53191489361702%;
}
.row-fluid .offset1:first-child {
margin-left: 8.51063829787234%;
*margin-left: 8.404255319148938%;
}
}
基本的に、1200px に対して 960px の CSS を適用します。
これはそれほど難しくありませんでした。bootstrap-responsive.css の 437 行目から始めて、このセクション全体を削除します。
@media (min-width: 1200px) {
...
}
この1行を変更するだけです
@media (max-width: 979px) {
これに：
@media (min-width: 1200px) {
簡単ハック！
より良い説明を編集：
bootstrap-responsive.css を見て、「メディア クエリ」を除くすべてのがらくたを見ると、基本的に次のアウトラインが残ります。
/* Landscape phones and down */
@media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Desktop */
@media (max-width: 979px) { ... }
/* Large desktop */
@media (min-width: 1200px) { ... }
徐々にスケールアップしていくのがわかりますか？私がしたことは、最後のセクションを削除してから、2番目を最後に変更して代わりに使用することです。
編集：
ところで、ブーストラップ カスタマイズ ウィザードを使用する場合は、大型モニター サポートの選択を解除することで、GUI でこれを行うことができます。
ブートストラップ CSS ファイルをハッキングまたは更新する必要はありません。コンテナがさらに大きくなるのを抑制することで、効果を無効にすることができます。使用する：
.container-fluid,
.container {
// Disable large-desktop breakpoint.
max-width: $container-md;
}
を変更しない限り、値$container-mdは通常です。LESSの場合、変数の をに置き換えます。通常の CSS の場合、変数をハードコードされたピクセル サイズに置き換えます。970px$grid-gutter-width$@
削除するだけで最高です：
@media (min-width: 1200px) { ... }
@media (max-width: 979px)すべてのデスクトップサイズのフォーマットのみを使用します
これに代わる方法は、1200px グリッド変数を通常のグリッド値の値に設定することです。この方法を使用すると、ソースの更新を回避し、アップグレードの問題を回避できます。
@gridColumnWidth1200: 60px;
@gridGutterWidth1200: 20px;