-1

私のJSPコードは

<h:field
  path="configuredChannels" 
  required="true" 
  code="admin.menu.channels">
    <div class="row-fluid" 
      data-channel-checkboxes="#">
        <form:checkboxes 
          element="div class='span1 checkbox'" 
          items="${channels}" 
          path="configuredChannels" />
    </div>
</h:field>

ただし、チェックボックスの項目は他のすべての解像度で正常に機能しますが、項目チャネルの値 facebook は 1024 X 768 でのみ次のチェックボックスと重複します。

こちらがjpeg画像です。 ここに画像の説明を入力

これは HTML の結果のクライアント コードです。

          <div class="controls">
                <div class="row-fluid" data-channel-checkboxes="#">
 <div class='span1 checkbox'>
<input id="configuredChannels1" name="configuredChannels" type="checkbox" value="SMS"/><label for="configuredChannels1">SMS</label>
</div class='span1 checkbox'>
<div class='span1 checkbox'>
<input id="configuredChannels2" name="configuredChannels" type="checkbox" value="Voice"/><label for="configuredChannels2">Voice</label></div class='span1 checkbox'>
<div class='span1 checkbox'><input id="configuredChannels3" name="configuredChannels" type="checkbox" value="Facebook"/><label for="configuredChannels3">Facebook</label></div class='span1 checkbox'>
<div class='span1 checkbox'><input id="configuredChannels4" name="configuredChannels" type="checkbox" value="Twitter"/><label for="configuredChannels4">Twitter</label>
</div class='span1 checkbox'><input type="hidden" name="_configuredChannels" value="on"/></div>
<span class="help-inline">
                    </span>
           </div>
       </div>

最新の画像 ここに画像の説明を入力

4

1 に答える 1

1

問題は、流動的な行グリッドを使用していて、チェックボックスに流動的なスパン幅を与えていることです:

<div class="row-fluid" data-channel-checkboxes="#">
 <div class='span1 checkbox'>

これは、row-fluid常にコンテナーの幅の 100% であることを意味します (HTML のコンテキストに関係なく、チェックボックスのspan1div にはクラスがあり、これは常に行流体幅の 6.382978723404255% です)。 Twitter Bootstrap で)

ウィンドウのサイズを変更すると、行流体の 100% が小さくなり、ある時点で、その ~6.38% ではチェックボックスの内容全体を収めるのに十分でないマークに達します。

この流体グリッドを維持している間、これに対する簡単な解決策はありません。それは本来の目的を正確に実行していますが、おそらくこれを意図していませんでした。より良い解決策は、チェックボックスに定義された幅を与えずに、必要なすべての幅を使用できるようにすることです。

チェックボックスの div から削除span1して、次の CSS を追加してみてください。

.checkbox {
  float: left;
}

これは、以前のように均等に分散された幅を持たないことを意味しますが、代わりに、1 行にすべてを表示する十分なスペースがなくなると、チェックボックスは新しい行に続きます。

添加

div の終了タグにクラスを設定しています。それはまったく役に立たない。クラス (および他のすべての属性) は、開始タグ ( <div>) でのみ設定する必要があります。</div>

于 2013-09-29T11:56:53.667 に答える