13

デザインに流動的な Twitter Bootstrap レイアウトを使用しており、レスポンシブにしようとしています。次のようなグリッドを考えてみましょう。

<div class="row-fluid">
    <div class="span4"></div>
    <div class="span8"></div>    
</div>

画面が小さくなったときに使用するために、span4 を非表示にし、span8 が幅全体を占めるようにする最良の方法は何ですか?

4

8 に答える 8

24

ブートストラップ 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 を非表示にします。

そのスペースを回収してスパン 8 を再スパンするには、これを css に追加します。

@media (max-width: 979px) {
  .span12-tablet {
    width: 91.48936170212765% !important;
    *width: 91.43617021276594% !important;
  }
}

たまたま使用量が少ない場合は、ブートストラップのグリッド ミックスインを使用できます。

.span12-tablet {
    @media (max-width: 979px) {
        #grid > .fluid > .span(12) !important;
    }
}
于 2012-10-01T15:56:26.627 に答える
13

最小/最大幅が設定されたメディアクエリを使用.span4するdisplay: none;

次に、ブートストラップによってすべての作業が既に行われているため、非表示にする幅より下のすべて.span8のルールに追加するため、複製する必要はありません。次のようになります。.span12.span4

@media (min-width: 320px){
    .span12,
    .span8 {
        width: 300px;
    }
}

(最後のコードは単なる例ですが、ブートストラップのスキャフォールディングに似たようなものがあります。)

それが役立つことを願っています:)

編集：

これは機能する可能性があり、ブートストラップ サイトで開発ツールを使用してテストしたところ、機能するように見えました。繰り返しますが、メディア クエリでは次のようになります。

@media (min-width: 320px){

    #special .span4 {
        display: none;
    }

    #special .span8 {
        float: none;
        width: auto;
    }

}
于 2012-06-14T16:42:51.610 に答える
6

ブートストラップ 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 列流動モードを使用します。

于 2012-11-04T08:46:33.770 に答える
3

これは、動的に保つための最良のオプションです。私の例では、fluidGridColumnWidth の横に幅を 6 列に設定しています。

[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;
            }
        }
    }
}
于 2013-02-15T14:35:59.777 に答える
3

TLDR: 2 番目のコード スニペットを使用してください

Bootstrap はモバイル ファーストのフレームワークなので、画面サイズが小さい順に説明します。レイアウトは、ブレークポイント/画面サイズに関係なく、常に 12 列幅です。

最小のブレークポイント (xs - 極小) から開始して、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、幅の 3 分の 1 (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>
于 2016-12-19T11:22:51.180 に答える
0

私はその小さなバリエーションを思いついた。

stack-tabletクラスをに追加しrow-fluidて、電話の幅だけでなく、タブレットの幅でもスパンをスタックします（ブートストラップのデフォルト）。

@media (max-width: 979px) {
    .row-fluid.stack-tablet [class*="span"] {
        width: 100%;
        display: block;
        float: none;
        margin-left: 0;
    }
}

displayクラスおよびhiddenクラスと一緒に使用できます。

于 2013-02-07T12:36:47.313 に答える
0

ただ：

<div class="row-fluid">
   <div class="span4 hidden-desktop"></div>
   <div class="span8"></div>    
</div>
于 2013-07-15T00:58:32.770 に答える