14

すべてに追加および/または追加する入力の幅を一致させる方法はありますか？

例を示しますが、さまざまな長さの追加/追加を含む複数の入力を指定すると、すべてが異なる幅になり、見栄えがよくないことがわかります。

http://jsfiddle.net/PLkfq/1/

4

3 に答える 3

1

jQueryを使用できます：

$(document).ready(function(){
 var normal_width = $("#service_name").width();
 var add_on = $(".add-on").width();
 var after_width = normal_width-add_on+3;
 $("#service_duration").width(after_width);
});

この方法により、入力の任意のサイズを設定できます

http://jsfiddle.net/PLkfq/25/

于 2013-04-05T12:47:42.483 に答える
1

ピクセル単位で正確にしたい場合は、クラスを忘れて ID にスタイルを適用します

分のスパンに ID を追加します

<span id="minutes" class="add-on">minutes</span>

このビットのcssを使用します

#service_name{width:200px;}
#service_duration{width:130px;}
#minutes{width:70px;}

http://jsfiddle.net/baptme/PLkfq/4/

于 2012-06-19T21:41:55.170 に答える
0

追加入力でクラス span1 を定義する代わりに、input-medium を使用してみてください。入力幅は均一ですが、追加ラベルはコンテンツのサイズによって異なりますが、問題ないようです。それが気に入らない場合は、アドオン クラスに最小幅を設定して、それらをすべて同じサイズにすることができます。

http://jsfiddle.net/PLkfq/40/

<div class="container-fluid">
<div class="span12">
    <div class="row-fluid">
        <form class="form-horizontal">
            <fieldset>

              <div class="control-group string required">
                <label class="string required control-label" for="service_name">
                  <abbr title="required">*</abbr> Service name</label>
                  <div class="controls">
                    <input class="string required" id="service_name" name="service[name]" size="50" type="text">
                  </div>
              </div>

              <div class="control-group integer required">
                <label class="integer required control-label" for="service_duration">
                  <abbr title="required">*</abbr> Duration</label>
                  <div class="controls">
                    <div class="input-append">
                      <input class="numeric integer required input-medium" id="service_duration" name="service[duration]" type="text"><span class="add-on">minutes</span>
                    </div>
                  </div>
              </div>
                  <div class="control-group integer required">
                <label class="integer required control-label" for="service_sec">
                  <abbr title="required">*</abbr> Seconds</label>
                  <div class="controls">
                    <div class="input-append">
                      <input class="numeric integer required input-medium" id="service_sec" name="service[sec]" type="text"><span class="add-on">sec</span>
                    </div>
                  </div>
              </div>
            </fieldset>
        </form>
    </div>
</div>

于 2013-06-18T14:58:11.677 に答える