Bootstrap3 HTML 在输入组中设置 <label> 长度

Question

我想让所有的标签都和下面的img一样大小:

这是 HTML 片段：

<div class="form-inline">
    <div class="col-xs-3 col-sm-3 input-group">
        <span class="input-group-addon"><label>{{ form.area_construida.label }}</label></span>
        <input class="form-control" 
        id="id_{{ form.area_construida.name }}" 
        name="{{ form.area_construida.name }}" 
        value="{{ form.area_construida.value }}"                              
        type="text"/>
    </div>   
</div>   
<br>
<div class="form-inline">   
    <div class="col-xs-3 col-sm-3 input-group">
        <span class="input-group-addon"><label>{{ form.area_total.label }}</label></span>
        <input class="form-control" 
        id="id_{{ form.area_total.name }}" 
        name="{{ form.area_total.name }}" 
        value="{{ form.area_total.value }}" 
        type="text"/>
    </div>
</div>
<br>
<div class="form-inline">   
    <div class="col-xs-3 col-sm-3 input-group">
        <span class="input-group-addon"><label>Data de Construção</label></span>
        <input class="form-control"  data-validation="date" data-validation-format="yyyy-mm-dd"
        id="id_{{ form.data_construcao.name }}" 
        name="{{ form.data_construcao.name }}" 
        value="{{ form.data_construcao.value }}" 
        type="text"/>
    </div>
    <p>Insira o ano em que o imóvel foi construído</p>
</div>

我尝试了一些东西但没有成功。谢谢

Answer 1

label { width: 70px;} 你可以像这样设置标签的宽度。

fiddle : https://jsfiddle.net/rtdtsy17/1/

Answer 2

这样就够了吗？

span.input-group-addon{width:50%}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-inline">
    <div class="input-group">
        <span class="input-group-addon"><label>Area construida</label></span>
        <input class="form-control" 
        id="id_{{ form.area_construida.name }}" 
        name="{{ form.area_construida.name }}" 
        value="222"                              
        type="text"/>
    </div>   
</div>   
<br>
<div class="form-inline">   
    <div class="input-group">
        <span class="input-group-addon"><label>Area total</label></span>
        <input class="form-control" 
        id="id_{{ form.area_total.name }}" 
        name="{{ form.area_total.name }}" 
        value="111" 
        type="text"/>
    </div>
</div>
<br>
<div class="form-inline">   
    <div class="input-group">
        <span class="input-group-addon"><label>Data de Construção</label></span>
        <input class="form-control"  data-validation="date" data-validation-format="yyyy-mm-dd"
        id="id_{{ form.data_construcao.name }}" 
        name="{{ form.data_construcao.name }}" 
        value="11/12/2011" 
        type="text"/>
    </div>
    <p>Insira o ano em que o imóvel foi construído</p>
</div>

Bootstrap3 HTML 在输入组中设置 <label> 长度

Bootstrap3 HTML set <label> length in a input-group

html

frontend

twitter-bootstrap-3