Подтвердить что ты не робот

Как получить входные данные с добавлением/добавлением, чтобы иметь соответствующие ширины с помощью twitter bootstrap

Есть ли способ иметь входы, которые имеют append и/или preend для всех, имеют соответствующие ширины?

Вот пример, но вы можете видеть, что с учетом нескольких входов с добавками/добавками различной длины все будут различной шириной, и это будет выглядеть не очень хорошо.

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

Ответ 1

Если вы хотите быть точным в пикселях, забудьте классы и примените стиль к ids

добавить идентификатор в диапазон минут

<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/

Ответ 2

вы можете использовать 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/

Ответ 3

Вместо определения класса span1 на входе добавления, попробуйте использовать среду ввода. Ширина входного сигнала должна быть одинаковой, но ярлык append будет отличаться от размера содержимого, который выглядит нормально. Если вам это не нравится, вы можете установить минимальную ширину в классе надстройки, чтобы сделать их одинаковыми.

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>