Question

我有以下表格，但我在制作相同长度的所有字段时遇到一些麻烦。事实上，代码太长了吗？我是一个初学者，所以我不知道我是否重复了很多代码。

这是html片段：

<div class="panel panel-default">
                  <div class = "panel-heading">
                    Informações do Imóvei 
                  </div>
                  <div class="panel-body">
                    <div class="form-inline">   
                        <label class="control-label">{{anuncioForm.tipo_imovel.label}}</label>
                        <p>Selecione o tipo do seu imóvel</p>
                        <select class="form-control control-label" 
                        id="id_{{ anuncioForm.tipo_imovel.name }}" 
                        name="anuncioForm.tipo_imovel.name">
                            <option value="" selected="selected">---------</option>
                            <option value="Casa">Casa</option>
                            <option value="Apartamento">Apartamento</option>
                            <option value="Comercial">Comercial</option>
                        </select>
                    </div>  
                    <br>
                    <div class="form-group">
                        <label for="exampleTextarea">Descrição do imóvel</label>
                        <p>Descreva com o máximo de detalhes o seu imóvel</p>
                        <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
                    </div>
                    <br>
                    <p><b>Características do imóvel</b></p>
                    <div class="form-inline">
                        <div class="input-group">
                          <span class="input-group-addon"><label>{{ anuncioForm.quartos.label }}</label></span>
                          <input class="form-control" 
                          id="id_{{ anuncioForm.quartos.name }}" 
                          name="id_{{ anuncioForm.quartos.name }}" 
                          type="text"/>
                        </div>         
                        <div class="input-group">
                          <span class="input-group-addon"><label>{{ anuncioForm.suites.label }}</label></span>
                          <input class="form-control" 
                          id="id_{{ anuncioForm.suites.name }}" 
                          name="id_{{ anuncioForm.suites.name }}" 
                          type="text"/>
                        </div>
                        <div class="input-group">
                          <span class="input-group-addon"><label>{{ anuncioForm.banheiros.label }}</label></span>
                          <input class="form-control" 
                          id="id_{{ anuncioForm.banheiros.name }}" 
                          name="id_{{ anuncioForm.banheiros.name }}" 
                          type="text"/>
                        </div>
                    </div>
                    <br>  
                    <div class="form-inline">
                        <div class="input-group">
                          <span class="input-group-addon"><label>{{ anuncioForm.area_construida.label }}</label></span>
                          <input class="form-control" 
                          id="id_{{ anuncioForm.area_construida.name }}" 
                          name="id_{{ anuncioForm.area_construida.name }}" 
                          type="text"/>
                        </div>   
                    </div>   
                    <br>
                    <div class="form-inline">   
                        <div class="input-group">
                          <span class="input-group-addon"><label>{{ anuncioForm.area_total.label }}</label></span>
                          <input class="form-control" 
                          id="id_{{ anuncioForm.area_total.name }}" 
                          name="id_{{ anuncioForm.area_total.name }}" 
                          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" 
                          id="id_{{ anuncioForm.data_construcao.name }}" 
                          name="id_{{ anuncioForm.data_construcao.name }}" 
                          type="text"/>
                        </div>
                        <p>Insira o ano em que o imóvel foi construído</p>
                    </div>
                    <br>
                    <p><b>Preço de Venda</b></p>
                    <div class="form-inline">   
                        <div class="input-group">
                          <span class="input-group-addon"><label>R$</label></span>
                          <input class="form-control" 
                          id="id_{{ anuncioForm.preco_venda.name }}" 
                          name="id_{{ anuncioForm.preco_venda.name }}" 
                          type="text"/>
                        </div>
                    </div>
                    <br>
                    <p><b>Preço do Aluguel</b></p>
                    <div class="form-inline">   
                        <div class="input-group">
                          <span class="input-group-addon"><label>R$</label></span>
                          <input class="form-control" 
                          id="id_{{ anuncioForm.preco_aluguel.name }}" 
                          name="id_{{ anuncioForm.preco_aluguel.name }}" 
                          type="text"/>
                        </div>
                    </div>
                    <br>
                </div>

那么，你建议我做什么？

Answer 1

我认为你的问题是你正在投入所有的意见。它应该是：

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInput">Name</label>
    <input type="text" class="form-control" id="exampleInput" placeholder="Jane Doe">
  </div>
</form>

然后，将宽度设置应用于类

.form-group

这将调整标签的宽度并输入以匹配，因为它们将自动调整。

希望这有帮助。

Answer 2

您可以利用bootstrap网格col-xx-xx或从外部调整输入宽度。

最好先阅读：https://v4-alpha.getbootstrap.com/components/input-group/和https://stackoverflow.com/a/25017998/6107715

＆＃13;

import { add, multiply } from './math'

＆＃13;

HTML，Bootstrap3 - 内联表单，如何设置字段长度？

2 个答案: