css - 如何通过附加/前置获取输入以与 twitter bootstrap 匹配宽度

Question

有没有办法让具有附加和/或前置的输入都具有匹配的宽度？

这是一个示例，但您可以看到，给定多个带有不同长度的附加/前置的输入，最终都会有不同的宽度，并且看起来不太好。

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

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

Answer 2

如果您想精确到像素，请忘记类并将样式应用于 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/

Answer 3

不要在附加输入上定义类 span1，而是尝试使用 input-medium。输入宽度是统一的，但附加标签会随着内容大小而变化，这看起来不错。如果你不喜欢这样，你可以在附加类上设置一个 min-width 以使它们都具有相同的大小。

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>