引導形式組

我想創建一個自舉形式輸入的基團象下面引導形式組

bootstrap input group

在圖像中示出的一個我想創建是一個輸入組：

[文本字段|下拉| textfield |按鈕| textfield |按鈕]

任何ide的如何做到這一點？我無法得到它的工作。我得到的第一個文本框和下拉列表在同一組中，但其餘組件放在行/列之外，我已經放置了我的輸入組。

來源

2015-07-01 Goran

是的，當我回家時，我可以發佈jsfiddle。 – Goran

;訣竅是在字段上設置寬度。做了一些醜陋的內聯樣式，你必須把它放在樣式表中。

<!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,output

來源

2015-07-01 14:01:00

類.input-group-addon和.input-group-btn的伎倆。有點border-radius控制一個小jQuery來更新下拉和賓果的價值！這裏是你的代碼：

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，供大家參考。乾杯!

來源

2015-07-01 14:34:22

回答

相關問題