0

流体グリッドでブートストラップ 2 ボタン ドロップダウンを使用します。これは、ボタン ドロップダウンのラベルが長いためです。

狭い画面での通常のボタンのように、このボタンの応答性を高めたいと考えています。以下の例: 最初のボタンはボタン ドロップダウンで、2 番目のボタンは通常のボタンです。2 番目は期待どおりにスケーリングされますが、最初はそうではありません。

ここに画像の説明を入力

コード：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="btn-group"> 
                <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
                    Download Rate Letter word1 word2 word3 word4
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li> <a href="#">PDF Format</a>
                    </li>
                    <li> <a href="#">Excel Format</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="span12">
            <button class="btn btn-primary">Download Rate Letter word1 word2 word3 word4</button>
        </div>
    </div>
</div>

回避する方法はありますか？

jsFiddler

4

3 に答える 3

2

これは、.btn-group が を持っているためです。これwhite-space: nowrapは、コンテンツが次の行に「分割」されないことを意味します。

これを CSS に追加する必要があります。

.btn-group {
  white-space: normal;
}

http://jsfiddle.net/35fcA/2/

于 2013-10-30T05:01:50.113 に答える
0

ブートストラップを次のようにカスタマイズしないことをお勧めしbtn-group-justifyます:

<div class="btn-group btn-group-justify">
....
</div>

jsFiddler: http://jsfiddle.net/35fcA/5/

于 2013-10-30T08:53:53.177 に答える
0

ミシェルは正しい。white-space: nowrapが問題です。white-space: normal彼女が言ったように変更する必要があります。しかし、問題は高さです。基本的に、単語が 2 行目に達すると、想定どおり、1 つのボタンが他のボタンよりも高くなります。これは問題にはなりませんが、ボタン上で実現しようとしている境界線があるか、ホバー時に背景が変化している可能性があります。これは、それらが同じ高さではないことが問題になるときです.

この場合、高さが同じになるように CSS を追加するか、JavaScript/JQuery を追加して、最も高いボタンの高さを自動的に取得し、ウィンドウの読み込みとサイズ変更時にすべてのボタンを同じ高さにするのが最善だと思います。CSS をレスポンシブにするのは難しく、すべてのユーザーが JavaScript を有効にしているわけではないなどの理由から、どちらも最良の選択肢ではありません。

私は同じ解決策を探しています。Bootstrap 3 が提供する正当化されたボタン グループの代わりに、テーブルのスタイリングも試しています。Roots テーマ (roots.io) を使用しています。330pxまで動くものがあれば大丈夫だと思います。

おそらく、レスポンシブ データ テーブルを使用するのが最適です。

http://css-tricks.com/responsive-data-tables/

次に、コンテナの幅を埋めるようにスタイルを設定し、高さが等しくなるようにします。幅がうまく収まらなくなるまで、別のスタイルのメニューに変更します。テーブルの問題です。display:table* が IE8 以前では機能しないなどの理由で、テーブルである必要があります。@media クエリを IE8 以前で動作させることはできますが、@media クエリを使用してテーブルを再設計することは困難です。ただし、WITH JavaScript についても、すべてのユーザーが JavaScript を使用しているわけではありません。最終的に

結局のところ、あなたは小さな質問をしているわけではありません。「div の数が増減しても、どうすれば複数の div を作成し、コンテナーを埋め、同じ高さにすることができますか?」<-- これは、IE8 以前や JavaScript が無効になっている人などにとって大きな問題です。

私のアイデア: 1. JavaScript がオフになっている人の幅を固定します。これは、モバイル デバイスと、ブラウザーのスケーリングに対するモバイル デバイスの動作を考慮すると難しいものです。したがって、コンテンツをラップするものに最小幅を設定してから、javascript でオフにする必要があります。2. Javascript 以外のユーザー向けに最小幅の CSS で見栄えがよくなるようにサイトを設計します。これを行うには、Javascript を無効にし、サイトを JS なしの最小幅で表示し、それに応じて設計します。次に、@media クエリと JS を使用して設計を修正します。3. cssmediaqueries.js や Respond.js などの JS を使用して、IE8 以前 (および古い FireFox など) の @media クエリを有効にします。

そうすれば、JavaScript がない場合、@media クエリは不要になり、サイトはそれがなくてもきれいに見えるようにスタイル設定されます。これが最低限のデザインになります。その後、@media クエリと JavaScript の助けを借りて、古いブラウザーを含むすべてのブラウザーですべてをほぼ完璧に表示できるはずです。

あなたのプロジェクトのために：

お知らせいたします。私はまだ、レスポンシブな幅と高さのテーブルで作業することが最良の選択肢になると思います-それか、ボタンを他の方法で同じ高さにする方法を見つけます。

于 2014-07-01T13:12:21.817 に答える