16

レスポンシブ レイアウトの 1 つを無効にしたいと考えています。モバイル ビューに切り替わる前の 2 番目に小さいレイアウト。

4

4 に答える 4

12

LESS ファイルからコンパイルする場合、これは非常に簡単です。開いてresponsive.less" " の下で、不要なレイアウトMEDIA QUERIESの宣言をコメント アウトするか削除します。@importたとえば、タブレットを通常のデスクトップに置きたくない場合、コードは次のようになります。

// MEDIA QUERIES
// ------------------

// Phones to portrait tablets and narrow desktops
@import "responsive-767px-max.less";

// Tablets to regular desktops
// @import "responsive-768px-979px.less"; // commented this out because I don't like it

// Large desktops
@import "responsive-1200px-min.less";

その後、再コンパイルするだけbootstrap.lessで完了です。

一方、コンパイルせずに直接bootstrap.less使用しているbootstrap-responsive.css場合は、特定のデバイスのメディア クエリを検索し、そのセクションを削除またはコメント アウトできます。

たとえば、縦向きのタブレット 1 を取り外すと、次のようになります ( bootstrap-responsive.css)。

/* some CSS code above this */

.hidden-desktop {
  display: none !important;
}

/* comment out the following rule entirely in order to disable it */
/*
@media (max-width: 767px) {
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
}*/ /* stop commenting out, we want everything below this */

@media (min-width: 768px) and (max-width: 979px) {
  .visible-tablet {
    display: inherit !important;
  }

/* More CSS code follows */

どの@mediaクエリがどのデバイス幅に対応しているかを調べるには、http://twitter.github.com/bootstrap/scaffolding.html#responsiveをご覧ください。メディア クエリは、対応するデバイス サイズとともにそこに示されます。

于 2012-05-31T20:02:21.230 に答える
3

LESS を使用する場合に spinarrow がこれを行う方法の改善として、@gridColumnWidth768and@gridGutterWidth768を一致するように設定します@gridColumnWidth。@gridGutterWidth

@gridColumnWidth768: @gridColumnWidth;
@gridGutterWidth768: @gridGutterWidth;

原則として、ベンダー ファイルはそのままにし、最後の手段としてのみ編集するようにしています。これにより、コア ブートストラップ ファイルを編集しなくても、この問題を修正できます。

于 2013-04-11T21:57:07.947 に答える
0
  • ブートストラップ呼び出しの後に CSS を呼び出します。
  • CSS で行をコピーし、必要なレイアウトの CSS フォームにまたがって、CSS に配置します。
  • メディアクエリを次のように変更します（最大幅は、あなたが固執したい幅です）：
@media (max-width: 1200px) {
    .row {
        margin-left: -30px;
        *zoom: 1;
    }
    .row:before,
    .row:after {
        display: table;
        content: "";
        line-height: 0;
    }
    .row:after {
        clear: both;
    }
    [class*="span"] {
        float: left;
        margin-left: 30px;
    }
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {
        width: 1170px;
    }
    .span12 {
        width: 1170px;
    }
    .span11 {
        width: 1070px;
    }
    .span10 {
        width: 970px;
    }
    .span9 {
        width: 870px;
    }
    .span8 {
        width: 770px;
    }
    .span7 {
        width: 670px;
    }
    .span6 {
        width: 570px;
    }
    .span5 {
        width: 470px;
    }
    .span4 {
        width: 370px;
    }
    .span3 {
        width: 270px;
    }
    .span2 {
        width: 170px;
    }
    .span1 {
        width: 70px;
    }
    .offset12 {
        margin-left: 1230px;
    }
    .offset11 {
        margin-left: 1130px;
    }
    .offset10 {
        margin-left: 1030px;
    }
    .offset9 {
        margin-left: 930px;
    }
    .offset8 {
        margin-left: 830px;
    }
    .offset7 {
        margin-left: 730px;
    }
    .offset6 {
        margin-left: 630px;
    }
    .offset5 {
        margin-left: 530px;
    }
    .offset4 {
        margin-left: 430px;
    }
    .offset3 {
        margin-left: 330px;
    }
    .offset2 {
        margin-left: 230px;
    }
    .offset1 {
        margin-left: 130px;
    }
}
于 2012-09-01T18:37:07.517 に答える
-1

LESSをコンパイルしていない場合、私が見つけた最善の方法は、bootstrap.cssにアクセスして、アクティブにしたくないサイズをコメントアウトすることです。CSSは非常によく整理されており、サイズの1つを無効にしても、他には何の影響も及ぼさないようです。

（もちろん、Bootstrapを更新するときにそれらを再度有効にしないように注意する必要があります。）

于 2013-02-08T21:49:40.420 に答える