HTML, Bootstrap3 - Inline form，如何设置字段长度？
HTML, Bootstrap3 - Inline form, how to set the field length?
我有以下表格，但我在使所有字段的长度相同时遇到了一些问题。其实代码是不是太长了？我是初学者所以我不知道我是否重复了很多代码。
这是 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>
那么，你有什么建议吗？
我认为你的问题是你对每一个输入都投入了。应该是：
<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>
然后，将您的宽度设置应用于 class
.form-group
这将调整标签和输入的宽度以匹配它们将自动调整。
希望对您有所帮助。
您可以利用 bootstrap 网格 col-xx-xx 或从外部调整输入宽度。
最好读一下：https://v4-alpha.getbootstrap.com/components/input-group/ and
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/*.input-group{min-width: 200px; max-height: 500px;}*/
</style>
</head>
<div class="panel panel-default">
<div class="panel-body">
<br>
<p><b>Características do imóvel</b></p>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 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="col-xs-3 col-sm-3 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="col-xs-3 col-sm-3 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="col-xs-3 col-sm-3 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="col-xs-3 col-sm-3 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="col-xs-3 col-sm-3 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>
<form class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<label class="input-group-addon" for="exampleInput">Name</label>
<input type="text" class="form-control" id="exampleInput" placeholder="Jane Doe">
</div>
</form>
<br>
<p><b>Preço de Venda</b></p>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 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="col-xs-3 col-sm-3 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>
我有以下表格，但我在使所有字段的长度相同时遇到了一些问题。其实代码是不是太长了？我是初学者所以我不知道我是否重复了很多代码。
这是 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>
那么，你有什么建议吗？
我认为你的问题是你对每一个输入都投入了。应该是：
<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>
然后，将您的宽度设置应用于 class
.form-group
这将调整标签和输入的宽度以匹配它们将自动调整。
希望对您有所帮助。
您可以利用 bootstrap 网格 col-xx-xx 或从外部调整输入宽度。
最好读一下：https://v4-alpha.getbootstrap.com/components/input-group/ and
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/*.input-group{min-width: 200px; max-height: 500px;}*/
</style>
</head>
<div class="panel panel-default">
<div class="panel-body">
<br>
<p><b>Características do imóvel</b></p>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 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="col-xs-3 col-sm-3 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="col-xs-3 col-sm-3 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="col-xs-3 col-sm-3 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="col-xs-3 col-sm-3 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="col-xs-3 col-sm-3 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>
<form class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<label class="input-group-addon" for="exampleInput">Name</label>
<input type="text" class="form-control" id="exampleInput" placeholder="Jane Doe">
</div>
</form>
<br>
<p><b>Preço de Venda</b></p>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 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="col-xs-3 col-sm-3 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>