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;}你可以将宽度设置为像这样标记。

小提琴：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在输入组

2 个答案: