在同一行自舉多個標籤和輸入

我想在同一行放置兩個標籤和兩個輸入。這甚至有可能嗎？在同一行自舉多個標籤和輸入

我希望它看起來像這一切都在同一行：

[標籤] [輸入] [按鈕]空白符[Label2的] [輸入2]

我有什麼到目前爲止

<form class="form-horizontal"> 
    <div class="control-group"> 
    <label class="control-label" for="inputEmail">Email</label> 
    <div class="controls"> 
     <input type="text" id="inputEmail" placeholder="Email"> 
     <span class="input-group-btn "> 
     <button type="button" class="btn" data-ng-click="click()">...</button> 
     </span> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label" for="inputPassword">Password</label> 
    <div class="controls"> 
     <input type="password" id="inputPassword" placeholder="Password"> 
    </div> 
    </div> 
    <div class="control-group"> 
    <div class="controls"> 
     <label class="checkbox"> 
     <input type="checkbox"> Remember me 
     </label> 
     <button type="submit" class="btn">Sign in</button> 
    </div> 
    </div> 
</form>

來源

2015-12-15 Terrance Jackson

@ IamRaviteja的回答是正確的做法。另請參閱[Bootstrap網站]（http://getbootstrap.com/components/#input-groups）以獲取更多示例。 –

這可能會幫助你

<div class="col-md-6 col-xs-6"> 
    <div class="input-group"> 
    <span class="input-group-addon">Your label</span> 
     <input type="text" class="form-control" placeholder="Search for..."> 
     <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">Go!</button> 
     </span> 
    </div><!-- /input-group --> 
    </div> 
    <div class="col-md-6 col-xs-6"> 
    <div class="input-group"> 
    <span class="input-group-addon">Your label</span> 
    <input type="text" class="form-control"> 
</div> 
    </div>

小提琴here

來源

2015-12-15 15:09:08 Raviteja

謝謝這個bootstrap真的是在絞盡腦汁。 –

那麼有沒有辦法做到這一點，沒有我的標籤看起來像一個按鈕？基本上沒有邊界的標籤。當插件具有邊框時，它會給人一種印象，即該字段是文本框，並且可以編輯它，只是標籤 –

能否解釋您想要顯示的內容？ – Raviteja

Raviteja的解決方案很好，但下面的代碼將創建表單，如您在評論中提到的（「沒有我的標籤看起來像一個按鈕」）。使用Bootstrap 3.3.7。

<form class="form-inline"> 
<div class="form-group"> 
    <label class="form-label">Email</label> 
    <input type="email" class="form-control"> 
    <button class="btn btn-default" type="button">Go!</button> 
</div> 

<div class="form-group" style="margin-left:30px"> 
    <label class="form-label">Password</label> 
    <input type="password" class="form-control"> 
</div> 

<div class="form-group" style="margin-left:30px"> 
    <div class="checkbox"> 
    <label><input type="checkbox">Remember me</label> 
    </div> 
</div> 
</form>"

來源

2017-04-16 18:56:41 addmoss

在同一行自舉多個標籤和輸入

回答

相關問題