2

これが実際の例です。

大きな解像度の場合、問題なく動作します。「人気のある製品」が一番下に一列に表示されます。

しかし、ウィンドウのサイズを 800 x 600 に変更して下にスクロールすると、すべてのサムネイルが 1 列に表示されます。

それを2列にするにはどうすればよいですか？または、Bootstrap はそれをサポートしていませんか?

つまり、デフォルトの CSS ファイルのロジックを変更する必要はありません。何か間違ったことをしていないか確認したかっただけです。

ありがとう。

4

2 に答える 2

2

純粋なブートストラップを使用したモバイルバージョンでは、2つの列を取得できないのではないかと思います。デフォルトのメディアクエリは、任意.spanXの1つの列を再配置します。

@media (max-width: 767px) {
  ...
  [class*="span"] {
    float: none;
    width: 100%;
    ...
  }
}

.spanXまた、別の内部にネストする.spanXこともできません。あなたができることは.span2、あなたの目的のために特別なバージョンでデフォルトのブートストラップクラスを拡張することです：

http://jsfiddle.net/LPsQy/

新しい.my-span2ものは通常どおりに動作し.span2ますが、モバイルメディアクエリの場合は流動的.span6です（幅の約50％を占める）。

于 2012-11-17T16:42:56.747 に答える
0

自分で Bootstrap の CSS を変更せずに行うのは簡単ではないと思います。うまくできない場合は、醜い解決策を次に示します。

  1. レスポンシブな「狭いタブレット以下 (<767px)」オプションなしで生成されたカスタムブートストラップ。それをBigと呼びましょう。
  2. 1 つのメディアのみを使用してカスタムBootstrap を生成しました (「タブレットからデスクトップ (767-979px)」を選択しました)。それをSmallと呼びましょう。
  3. Small CSS では、次の行を削除しました: @media (min-width: 768px) and (max-width: 979px) {、 @media (max-width: 979px) {、およびそれらの閉じ括弧}。これらは、グリッド システムとナビゲーション バーです。
  4. 次の内容で独自の CSS を作成します。

あなたの新しいcss/bootstrap.css

@media (max-width: 767px) {
  ... paste Small CSS here ...
}
@media (min-width: 768px) {
  ... paste Big CSS here ...
}

例を参照してください。

注 1: 767px 以下のグリッド システムは 2 列に固定されており、流動的な 2 列を好む場合があるため、まだ希望どおりではない可能性があります。

注 2: corhidden-*とvisible-*クラスを機能させるには、さらにいくつかの変更が必要です。

注 3: CSS ファイルを比較して、実際の相違点を確認してください。

ブートストラップは、一般的な問題を簡単に解決するために作成されました。問題が一般的でない場合、解決策は簡単ではありません;) あなたの場合、Bootstrap のいくつかの部分を選択して、独自の CSS を再作成する必要があります...

于 2012-11-19T11:56:19.093 に答える