引導表單組
[英]Bootstrap form group
問題描述
我想創建一個引導表單輸入組，如下圖所示
我要創建的是具有以下內容的輸入組：
[文本字段| 下拉菜單 文字欄| 按鈕| 文字欄| 按鈕]
任何一個想法如何做到這一點？ 我無法正常工作。 我在同一組中獲得了第一個文本字段和下拉列表，但其余組件位於我已將輸入組放入的行/列的外部。
2 個解決方案
解決方案1
0 2015-07-01 14:01:00
;訣竅是在字段上設置寬度。 做了一些難看的內聯樣式，您必須將其放在樣式表中。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="exampleInputAmount" style="width:50px">
<select class="form-control" style="width:90px;-webkit-appearance: none;">
<option>kg</option>
<option>gram</option>
</select>
<input type="text" class="form-control" id="exampleInputAmount" style="width:50px">
<div class="input-group-addon btn">Flow</div>
<input type="text" class="form-control" id="exampleInputAmount" style="width:50px">
<div class="input-group-addon btn">Unit</div>
</div>
</div>
</form>
</body>
</html>
在此處查看示例和結果： http : //jsbin.com/poyaqu/edit?html，輸出
解決方案2
0 2015-07-01 14:34:22
類.input-group-addon和.input-group-btn 。 用一些jQuery進行一些border-radius控制，以更新dropdown和Bingo的值！ 這是您的代碼：
HTML：
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Weight">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
KG
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">KG</a></li>
<li><a href="#">POUND</a></li>
</ul>
</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="">
<div class="input-group-btn">
<button type="button" class="btn btn-default">
Flow
</button>
</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="">
<div class="input-group-btn">
<button type="button" class="btn btn-default">
Unit / KG
</button>
</div>
</div>
</div>
</form>
CSS：
.btn-default {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.input-group-btn:last-child>.btn {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
JS：
$(".dropdown-menu li a").click(function(){
$(this).parents(".input-group-btn").find('.btn').html($(this).text()+' <span class="caret"></span>');
});
這是一個有效的BOOTPLY供您參考。 干杯!
引導表單組
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.