嗨，我想在如何將我的姓名、電子郵件、聯系人、地址輸入框的間距與圖片中的描述間距相匹配方面需要一些幫助。請忽略我在下面用于我的代碼的相同類 ID，因為我正在測驗
這是我的表單的代碼
<form>
<div class="form-group row">
<label for="inputName" class="col-form-label" style="padding-left: 20px; ">Name: </label>
<div class="col-sm-5">
<input type="Name" class="form-control" id="inputEmail3" placeholder="Name" >
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Email: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Contact: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Contact">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Address: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Address">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Description: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Description...">
</div>
</div>
</form>uj5u.com熱心網友回復：
如果您使用Bootstrap 表單構建器來實作這一點，也許會對您有所幫助。
這是我的代碼：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<form>
<div class="form-group row">
<label for="name" class="col-2 col-form-label">Name:</label>
<div class="col-10">
<input id="name" name="name" placeholder="Name" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-2 col-form-label">Email:</label>
<div class="col-10">
<input id="email" name="email" placeholder="Email" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="contact" class="col-2 col-form-label">Contact:</label>
<div class="col-10">
<input id="contact" name="contact" placeholder="Contact" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="address" class="col-2 col-form-label">Address:</label>
<div class="col-10">
<input id="address" name="address" placeholder="Address" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-2 col-form-label">Description:</label>
<div class="col-10">
<input id="description" name="description" placeholder="Description" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="offset-2 col-10">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>或者碼筆
uj5u.com熱心網友回復：
您可以實作一致性（使用對齊）的一種可能解決方案是向標簽添加一個類，該類定義了一個min-width等于描述標簽寬度的類。這將強制較短的標簽至少與長標簽具有相同的寬度，并且將它們向右對齊將使它們與輸入元素居中。
例如：
.my-form-label {
min-width: 7rem;
text-align:right;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class='container'>
<form>
<div class="form-group row">
<label for="inputName" class="col-form-label my-form-label" style="padding-left: 20px; ">Name: </label>
<div class="col-sm-5">
<input type="Name" class="form-control" id="inputEmail3" placeholder="Name" >
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Email: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Contact: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Contact">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Address: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Address">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Description: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Description...">
</div>
</div>
</form>
</div>uj5u.com熱心網友回復：
您應該col為您的label. 在這里，我使用col-2soinput可以包含在row.
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<form>
<div class="form-group row my-3">
<label for="inputName" class="col-2 col-form-label"> Name:</label>
<input class="col-sm-5" type="Name" class="form-control" id="inputEmail3"
placeholder="Name">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Email:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Email">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Contact:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Contact">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Address:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Address">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Description:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Description...">
</div>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/379890.html
標籤：html css 形式 bootstrap-4
下一篇：嘗試將輸入框居中放置在div中