web-dev-qa-db-ja.com

ブートストラップ、レイアウトにレスポンシブな変更を加える

流動的なTwitter Bootstrapレイアウトをデザインに使用していて、レスポンシブにしようとしています。次のようなグリッドを検討してください。

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

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

csstwitter-bootstraplessresponsive-design
13
C. E.

最小/最大幅を.span4からdisplay: none;に設定してメディアクエリを使用する

次に、.span8のルールに.span12を追加して、非表示にした幅の下にあるすべてのものに対して.span4を追加します。次のようになります。

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

（コードの最後のビットは単なる例ですが、ブートストラップの足場にそのようなものがあります。）

それが役に立てば幸い:)

編集：

これは機能する可能性があります。bootstrapサイトで開発ツールを使用してテストしましたが、機能しているようです。ここでも、メディアクエリで：

@media (min-width: 320px){

    #special .span4 {
        display: none;
    }

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

}
13
will

bootstrap 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を非表示にします。

そのスペースを再利用してspan8を再スパンするには、これを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;
    }
}
24
Gert-Jan van de Streek

bootstrap 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列の流体モードを使用します。

7
George Filippakos

このように書く

電話デバイスでは、このdivは非表示になります<div class="span4 hidden-phone"></div>

このdivは<div class="span8 visible-phone"></div>

更新

Bootstrap 2.3の以前の回答

bootstrap 3が市場に登場しました。

だから私は新しいユーザーのために私の答えを更新します→bootstrap3

電話デバイスでは、このdivは非表示になります<div class="col-md-4 hidden-xs"></div>

このdivは<div class="col-xs-4 visible-xs"></div>

3
asad raza

これは、動的に保つための最良のオプションです。私の例では、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;
            }
        }
    }
}
3
Malte Schulze-Boeing

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 /画面の幅が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>
3
ono2012

ただ：

<div class="row-fluid">
   <div class="span4 hidden-desktop"></div>
   <div class="span8"></div>    
</div>
0
Daniel Faria

その小さなバリエーションを思いつきました。

追加 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-クラスと一緒に使用できます。

0
John