[英]How to align Bootstrap input and labels using Grid System in Bootstrap?
[英]How to align labels with inputs using bootstrap?
我正在嘗試對齊此表單
標簽總是占據另一個位置......並且沒有輸入......我該如何處理?
我正在使用此代碼
<div class="form-group col-xs-3 col-md-4" >
<label class="control-label col-md-4" >Rif: </label>
<div class="col-md-8">
<input type="text" name="rif" id="rif" class="form-control" />
</div>
</div>
<div class="form-group col-xs-3 col-md-4">
<label class="control-label col-md-4">Empresa: </label>
<div class="col-md-8">
<input type="text" name="razon_social" id="razon_social" class="form-control" />
</div>
</div>
<div class="form-group col-xs-3 col-md-4">
<label class="control-label col-md-4">Rif.Holding: </label>
<div class="col-md-8">
<select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
<option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 1</option>
<option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 2</option>
<option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 3</option>
<option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 4</option>
<option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 5</option>
</select>
</div>
</div>
<div class="form-group col-xs-3 col-md-4">
<label class="control-label col-md-4">Nom.Holding:</label>
<div class="col-md-8">
<select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
<option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 1</option>
<option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 2</option>
<option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 3</option>
<option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 4</option>
<option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 5</option>
</select>
</div>
</div>
<div class="form-group col-xs-3 col-md-4">
<label class="control-label col-md-4">PIN: </label>
<div class="col-md-8">
<select name="fk_pin_id" id="fk_pin_id" class="form-control">
<option value="1" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 1</option>
<option value="2" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 2</option>
<option value="3" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 3</option>
<option value="4" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 4</option>
<option value="5" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 5</option>
</select>
</div>
</div>
<div class="form-group col-xs-3 col-md-4">
<label class="control-label col-md-4">Cartera: </label>
<div class="col-md-8">
<select name="fk_cartera_id" id="fk_cartera_id" class="form-control">
<option value="1" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 1</option>
<option value="2" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 2</option>
<option value="3" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 3</option>
<option value="4" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 4</option>
<option value="5" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 5</option>
</select>
</div>
</div>
如何在不丟失格式的情況下對齊這些項目? 有人可以幫助我嗎?
在這里,您有類似的東西正在尋找:
<form>
<div class="form-row justify-content-between">
<div class="form-group row col-md-4">
<label class="col-sm-4 col-form-label">Rif: </label>
<div class="col-sm-8">
<input type="text" name="rif" id="rif" class="form-control" />
</div>
</div>
<div class="form-group row col-md-8">
<label class="col-sm-2 col-form-label">Empresa: </label>
<div class="col-sm-10">
<input type="text" name="razon_social" id="razon_social" class="form-control" />
</div>
</div>
</div>
<div class="form-row justify-content-between">
<div class="form-group row col-md-4">
<label class="col-sm-4 col-form-label">Rif.Holding: </label>
<div class="col-sm-8">
<select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
<option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 1</option>
<option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 2</option>
<option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 3</option>
<option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 4</option>
<option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 5</option>
</select>
</div>
</div>
<div class="form-group row col-md-8">
<label class="col-sm-2 col-form-label">Nom.Holding: </label>
<div class="col-sm-10">
<select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
<option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 1</option>
<option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 2</option>
<option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 3</option>
<option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 4</option>
<option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 5</option>
</select>
</div>
</div>
</div>
<div class="form-row justify-content-between">
<div class="form-group row col-md-4">
<label class="col-sm-4 col-form-label">PIN: </label>
<div class="col-sm-8">
<select name="fk_pin_id" id="fk_pin_id" class="form-control">
<option value="1" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 1</option>
<option value="2" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 2</option>
<option value="3" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 3</option>
<option value="4" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 4</option>
<option value="5" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 5</option>
</select>
</div>
</div>
<div class="form-group row col-md-4">
<label class="col-sm-4 col-form-label">Cartera: </label>
<div class="col-sm-8">
<select name="fk_cartera_id" id="fk_cartera_id" class="form-control">
<option value="1" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 1</option>
<option value="2" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 2</option>
<option value="3" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 3</option>
<option value="4" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 4</option>
<option value="5" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 5</option>
</select>
</div>
</div>
<div class="form-group row col-md-4">
<label class="col-sm-4 col-form-label">Cartera: </label>
<div class="col-sm-8">
<select name="fk_cartera_id" id="fk_cartera_id" class="form-control">
<option value="1" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 1</option>
<option value="2" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 2</option>
<option value="3" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 3</option>
<option value="4" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 4</option>
<option value="5" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 5</option>
</select>
</div>
</div>
</div>
</form>
只需在表單組的每個 div 中添加一個 class="row"
<div class="row col-12">
<div class="form-group row col-xs-3 col-md-4 row " >
<label class="control-label col-md-4" >Rif: </label>
<div class="col-md-8">
<input type="text" name="rif" id="rif" class="form-control" />
</div>
</div>
<div class="form-group row col-xs-3 col-md-4">
<label class="control-label col-md-4">Empresa: </label>
<div class="col-md-8">
<input type="text" name="razon_social" id="razon_social" class="form-control" />
</div>
</div>
</div>
<div class="row col-12">
<div class="form-group row col-xs-3 col-md-4">
<label class="control-label col-md-4">Rif.Holding: </label>
<div class="col-md-8">
<select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
<option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 1</option>
<option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 2</option>
<option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 3</option>
<option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 4</option>
<option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 5</option>
</select>
</div>
</div>
<div class="form-group row col-xs-3 col-md-4">
<label class="control-label col-md-4">Nom.Holding:</label>
<div class="col-md-8">
<select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
<option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 1</option>
<option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 2</option>
<option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 3</option>
<option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 4</option>
<option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 5</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group row col-xs-3 col-md-4">
<label class="control-label col-md-4">PIN: </label>
<div class="col-md-8">
<select name="fk_pin_id" id="fk_pin_id" class="form-control">
<option value="1" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 1</option>
<option value="2" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 2</option>
<option value="3" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 3</option>
<option value="4" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 4</option>
<option value="5" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 5</option>
</select>
</div>
</div>
<div class="form-group row col-xs-3 col-md-4">
<label class="control-label col-md-4">Cartera: </label>
<div class="col-md-8">
<select name="fk_cartera_id" id="fk_cartera_id" class="form-control">
<option value="1" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 1</option>
<option value="2" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 2</option>
<option value="3" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 3</option>
<option value="4" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 4</option>
<option value="5" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 5</option>
</select>
</div>
</div>
<div class="form-group row col-xs-3 col-md-4">
<label class="control-label col-md-4">Cartera: </label>
<div class="col-md-8">
<select name="fk_cartera_id" id="fk_cartera_id" class="form-control">
<option value="1" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 1</option>
<option value="2" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 2</option>
<option value="3" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 3</option>
<option value="4" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 4</option>
<option value="5" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 5</option>
</select>
</div>
</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.