css - Twitter Bootstrap: インライン選択が整列しない

Question

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <form method="post" action="">
                <fieldset>
                    <div class="control-group">
                        <div class="controls">
                            <select class="span6" name="range-from:price" id="price_from">
                                <option value="">Min Price</option>                                 
                                <option value="2000">$2K</option>
                                <option value="4000">$4K</option>
                                <option value="6000">$6K</option>
                                <option value="8000">$8K</option>
                                <option value="10000">$10K</option>
                                <option value="15000">$15K</option>
                                <option value="20000">$20K</option>
                                <option value="25000">$25K</option>
                            </select>
                            <select class="span6 pull-right" name="range-to:price" id="price_to">
                                <option value="">Max Price</option>
                                    <option value="2000">$2K</option>
                                <option value="4000">$4K</option>
                                <option value="6000">$6K</option>
                                <option value="8000">$8K</option>
                                <option value="10000">$10K</option>
                                <option value="15000">$15K</option>
                                <option value="20000">$20K</option>
                                <option value="500000">$25K+</option>
                            </select>
                        </div>
                    </div>

                    <div class="control-group">
                        <div class="controls">
                            <select class="span6" name="range-from:model_year" id="model_year_from">
                                <option value="">Min Year</option>                                  
                                <option value="1990">1990</option>
                                <option value="2000">2000</option>
                                <option value="2005">2005</option>
                                <option value="2010">2010</option>
                                <option value="2011">2011</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                            </select>
                            <select class="span6 pull-right" name="range-to:model_year" id="model_year_to">
                                <option value="">Max Year</option>
                                <option value="1990">1990</option>
                                <option value="2000">2000</option>
                                <option value="2005">2005</option>
                                <option value="2010">2010</option>
                                <option value="2011">2011</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
            </form>             
        </div>
        <div class="span8">
        </div>
        <div class="span2">         
        </div>
    </div>
</div>
    </body>
</html>

結果ウィンドウを十分に広くすると、選択フィールドがインラインレイアウトに入ろうとすることがわかります。これには少し問題がありますが、JSFiddle でははっきりとわかりません。

私のスクリーンショット

クロム <-- Chrome から、正しく整列

ただし、FF および IE では、「最大年」の選択が「最小年」と水平方向に整列していません。代わりに、次のようにはるかに低くなります。

ここに画像の説明を入力 <-- FF から

最初は、「Min Year」または「Max Year」の内容と関係があるのではないかと思い、微調整を開始しました。しかし、何もそれを修正しませんでした。「最小価格」と「最大価格」のノードを削除すると、「最小年」と「最大年」が突然 OK になりました。

何が問題なのですか？

score 2 · Accepted Answer

さて、問題は次のとおりです。

    <div class="span2">
    ...other code
        <div class="span6">
             your dropdown    
        </div>
     ...other code
    </div>

span2 コンテナー内に span6 を配置しようとしていますが、それを格納するには十分な大きさではありません。

次のように、span2 を span12 に変更する必要があります。

http://jsfiddle.net/3N754/

または、スパン 2 内に 2 つの span6 を配置する場合は、さらに多くのものが必要であることに注意してください。<div class='row-fluid'>

例えば

<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

score 1 · Accepted Answer

また、問題は要素間の空白であると考えています（そして、selectタグの2番目のペアの間に空白があります）。inlineコンテナーの幅を超えたときに単語が行うように、inline-block要素を強制的に折り返すため、それらは要素内で本当に重要です。2 つの簡単な解決策は、要素間のスペースを削除するかwhite-space:nowrap;、親要素にルールを追加することです。

score 0 · Accepted Answer

含めるbootstrap-combined.min.cssファイルには、BootstrapResponsiveが含まれています。コンパイルされたレスポンシブスタイルには、.span*要素の非常に正確な幅のパーセンテージがあります。Chromeのコードと開発者ツールを試してみたところ、ブラウザの幅が異なると実際に異なる結果が得られることがわかりました。

元。1：ブラウザの幅が1200px以上

1200+pxビューポート

元。2：786〜969pxのブラウザ幅

768-969pxビューポート

これらの幅は、選択ボックスからの余分な幅を考慮せずにdiv用に作成されたようです。

css忍者はこれよりも良い解決策を持っているかもしれません。ただし、選択幅を少し小さく設定すると、フォームの見栄えを悪くすることなく問題を解決できます。

<style type="text/css">
  .row-fluid select.span6 {
    width: 48%;
  }
</style>

select.span6の場合、48.0％は良さそうですが、これらはネイティブの選択ボックスであるため、オペレーティングシステムによって幅が異なる場合があります。（私はOSXを使用しています。）上記のさまざまな値を使用して、考えられるすべてのブラウザー幅に最適な値を確認してください。

さらに、レスポンシブ機能が必要ない場合（つまり、サイトがモバイル向けに最適化されていることを気にしない場合）は、通常のブートストラップcssのみを含めます。これにより、サイトはすべてのビューポートに対して一方向に表示され、すべてのデバイスでどのように表示されるかを心配する必要がなくなります。

score 0 · Accepted Answer

最初に、あなたはあなたの問題を再現しない（そしてそれは別の問題を抱えている：widtchが小さすぎる）Jsfiddleを置きます、私はそのポイントを理解していません。

とにかく、あなたはあなたの選択にspan6を置きます：<select class="span6"

しかし、あなたはそれらをに入れませんでした<div class="row-fluid"></div>。

score 0 · Accepted Answer

あなたの問題は、.span6スタイルを選択に適用すると、ブラウザは48、....パーセントのサイズを適用しますが、コンポーネントをレンダリングするために余分な長さを追加し、長すぎて収まらないことだと思います、したがって、もう一方の下にスライドします。

回避策として、selectをdivでラップし、代わりに.span6クラスをdivに適用して、ブラウザーが適切な長さをレンダリングするようにすることを提案します。次に、divに収まるように、選択範囲に100％の幅を追加する必要があります。

http://jsfiddle.net/SkMZ5/2/

例：

<div class="controls">
    <div class="span6">
        <select style="width:100%" name="range-from:model_year" id="model_year_from">
            <option value="">Min Year</option>              
            <option value="1990">1990</option>
            <option value="2000">2000</option>
            <option value="2005">2005</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
        </select>
    </div>

    <div class="span6 pull-right">
        <select style="width:100%" name="range-to:model_year" id="model_year_to">
            <option value="">Max Year</option>
            <option value="1990">1990</option>
            <option value="2000">2000</option>
            <option value="2005">2005</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
        </select>
    </div>
</div>

score 0 · Accepted Answer

この種の問題は、多くの場合、要素間のスペースによって引き起こされます。

1 つの要素が 50% を占め、2 番目の要素も 50% を占めている場合、それらの間の単純なスペースはそれらを 100% より大きくするためです。

通常、次のことができます。

要素間のスペース/ブレークラインを削除します (この場合は選択)
コンテナの fontsize を 0 に設定して、スペースが「スペースを占有しない」ようにします。:)

これはあなたの特定のケースの解決策ではないかもしれませんが、同じ種類の問題を抱えている他の人にとってはそうかもしれません.

お知らせ下さい。

編集：

この変更されたフィドルを見てください:私はMacOでクロムを使用しており、結果が異なる可能性があることはわかっていますが、あなたの例を試したところ、すべての選択が別の行にありました.

ここのフィドルhttp://jsfiddle.net/3nJYY/1/では、最初のグループの選択の間のスペース /breakline を削除しました。これで、それらは同じ行 (探していたもの) に表示されますが、2 番目のグループの選択は別の行に配置されます。

ここが重要な部分です。最後の選択と2番目の選択の間のスペースまたはブレークラインを削除したことに注意してください。

<div class="control-group">
    <div class="controls">
        <select class="span6" name="range-from:price" id="price_from">
            ...
        </select><select class="span6 pull-right" name="range-to:price" id="price_to">
            ...
        </select>
    </div>
</div>

css - Twitter Bootstrap: インライン選択が整列しない

6 に答える 6

Related

Reference