web-dev-qa-db-ja.com

Twitterからレスポンシブ機能を完全にオフにする方法Bootstrap 3？

Bootstrap 3で応答性をオフにするにはどうすればよいですか？

デスクトップバージョンを開発したいだけで、サイズが異なる場合でもデスクトップバージョンのように表示されるはずです。

Twitter.comはこれを行います。サイズを変更しようとしても、私のサイトがすべての要素を再設計している間、UIには何も起こりません。

私がそれを望む方法の例： enter image description here

とにかく今、応答性をオフにする方法は？すべての助けに感謝します。

また最近、Bootstrap 2.0でレスポンシブブーストCSSを削除するだけですが、3.0では1つのcssファイルに焼き付けられていることを読みました。

ありがとう。

twitter-bootstrapresponsive-designtwitter-bootstrap-3
20
user023

EDIT：以下の私のコードはv3.0.0RC2用に書かれましたが、v3.0.0ではドキュメントにこの質問に関するセクションがありました： http://getbootstrap.com/getting-started/#disable-responsive

幅は一定の割合であるため、col-xs-Xクラスを使用します。応答性は、さまざまなメディアサイズで.containerを使用してmax-widthから得られます。 .containerの独自の代替を定義し、通常のような他のすべてを使用できます。

以下の例のフィドル： http://jsfiddle.net/xTePL/

HTML：

<!-- Don't use .container at all or you will have to
     override a lot of responsive styles. -->
<div class="container-non-responsive">
  <div class="row">
    <div class="col-xs-4">
      <h1>Welcome to Non-responsive Land</h1>
    </div>
    <div class="col-xs-8">
      <!-- More content, more content -->
    </div>
  </div>
</div>

CSS：

.container-non-responsive {
  /* Margin/padding copied from Bootstrap */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;

  /* Set width to your desired site width */
  width: 1170px;
}
46
Ross Allen

ここに私のために働いたものがあります：

<meta name='viewport' content='width=1190'>

私は自分のコンテンツの周りに少しマージンを望んでいたので、

.container{
  width: 1150px !important;
}

IPadとiPhoneでテストしました。

12
machineboy2045

@ ssorallen の（受け入れられた）ソリューションが好きです。このソリューションでは、要求されたとおりにすべてのレスポンシブ機能がオフになるわけではありません。

@grid-float-breakpoint（デフォルトは768px）を使用すると、メニューが折りたたまれ、画面の幅に基づいてフォームラベルの配置が設定されます。モーダルとカルーセルの幅もこの設定に依存します。

詳細については、以下を参照してください： http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

update@skellyからも以下のリンクを確認してください。ただし、これでもgrid-float-breakpointが変更されないことに注意してください。このソリューションもコードを削減しません。 TB3のさらなるバージョンは いくつかのファイルを分割する 多分。これにより、非応答バージョンのコンパイルが容易になります。

1
Bass Jobsen

すべてのメディアクエリを無効にして検索し、bootstrap.cssファイルでコメントアウトします。それは数分以上かかりません。

次に、ページコンテンツを設定する外側のdivに固定幅を設定する必要があります。通常、これはbootstrapの.containerまたは#wrapperのようなものも一般的です。960pxまたはサイトに適したものです。

また、HTMLヘッドのメタビューポートタグを削除するかコメントアウトする必要があります。ない場合は、それでも問題ありません（ただし、レスポンシブにする場合は、追加する必要があります）。次のようになります。

1
Sharma