Câu trả lời:
Đừng lồng <form>thẻ, điều đó sẽ không hoạt động. Chỉ cần sử dụng các lớp Bootstrap.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-md-2 control-label">Type</label>
<div class="col-md-3">
<input type="text" class="form-control" id="inputType" placeholder="Type">
</div>
</div>
<div class="form-group">
<span class="col-md-2 control-label">Metadata</span>
<div class="col-md-6">
<div class="form-group row">
<label for="inputKey" class="col-md-1 control-label">Key</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-1 control-label">Value</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</div>
</form>
Bạn có thể đạt được hành vi đó theo nhiều cách, đó chỉ là một ví dụ. Kiểm tra nó trên bootply này
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputType">Type</label>
<div class="controls">
<input type="text" id="inputType" placeholder="Type">
</div>
</div>
<div class="control-group">
<span class="control-label">Metadata</span>
<div class="controls form-inline">
<label for="inputKey">Key</label>
<input type="text" class="input-small" placeholder="Key" id="inputKey">
<label for="inputValue">Value</label>
<input type="password" class="input-small" placeholder="Value" id="inputValue">
</div>
</div>
</form>Lưu ý rằng tôi đang sử dụng .form-inlineđể có được kiểu dáng propper bên trong a .controls.
Bạn có thể kiểm tra nó trên jsfiddle này
Đối với bootstrap 3, ví dụ trên hoạt động nhưng quá phức tạp, thay vì sử dụng nhóm biểu mẫu sử dụng biểu mẫu nội tuyến cho các trường bạn muốn nội tuyến.
Ví dụ:
<div class="form-group">
<label>CVV</label>
<input type="text" size="4" class="form-control" />
</div>
<div class="form-inline">
<label>Expiration (MM/YYYY)</label><br>
<input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>Điều này sử dụng twitter bootstrap 3.x với một lớp css để có được các nhãn để ngồi trên đầu vào. Đây là một liên kết tuyệt vời , đảm bảo mở rộng bảng kết quả đủ rộng để thấy hiệu quả.
HTML:
<div class="row myform">
<div class="col-md-12">
<form name="myform" role="form" novalidate>
<div class="form-group">
<label class="control-label" for="fullName">Address Line</label>
<input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
</div>
<div class="form-inline">
<div class="form-group">
<label>State</label>
<input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
</div>
<div class="form-group">
<label>ZIP</label>
<input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
</div>
</div>
<div class="form-group">
<label class="control-label" for="country">Country</label>
<input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
</div>
</form>
</div>
</div>CSS:
.myform input.form-control {
display: block; /* allows labels to sit on input when inline */
margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}Vì bootstrap 4 sử dụng div class = "form-row" kết hợp với div class = "form-group col-X". X là chiều rộng bạn cần. Bạn sẽ nhận được các cột nội tuyến tốt đẹp. Xem fiddle .
<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label col-sm-2" for="naam">Naam: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
<div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-5">
<label class="control-label col-sm-4" for="telefoon">Telefoon: *</label>
<div class="col-sm-12">
<input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
<div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
</div>
</div>
<div class="form-group col-5">
<label class="control-label col-sm-4" for="email">E-mail: </label>
<div class="col-sm-12">
<input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
<div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="titel">Titel: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
<div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
</div>
</div>
<from>Tôi biết đây là một câu trả lời cũ nhưng đây là những gì tôi thường làm:
CSS:
.form-control-inline {
width: auto;
float:left;
margin-right: 5px;
}Sau đó bọc các trường bạn muốn được nội tuyến trong div và thêm .form-control-inline vào đầu vào, ví dụ:
HTML
<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>