標籤在左側而不是輸入字段上

Question

我希望標籤不在輸入字段上方，但在左側。

<form method="post" action="" role="form" class="form-inline"> 
    <div class="form-group"> 
    <label for="rg-from">Ab: </label> 
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control"> 
    </div> 
    <div class="form-group"> 
    <label for="rg-to">Bis: </label> 
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control"> 
    </div> 
    <div class="form-group"> 
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary"> 
    </div> 
</form> 

此代碼給我：

我想有：

Answer 1

您必須左浮動，像這樣的所有元素：

.form-group, 
.form-group label, 
.form-group input { float:left; display:inline; } 

給一些裕度所需的元素：

.form-group { margin-right:5px } 

和設置標籤的同一行的高度字段的高度：

.form-group label { line-height:--px; } 

Answer 2

喜歡這張

DEMO

HTML

<div class="row"> 
    <form class="form-inline"> 
    <fieldset> 
     <label class="control-label"><strong>AB :</strong></label> 
     <input type="text" class="input-mini" > 
     <label class="control-label"><strong>BIS:</strong></label> 
     <input type="text" class="input-mini" > 
     <input type="button" value="Clear" class="btn btn-default btn-clear"> 
     <input type="submit" value="Los!" class="btn btn-primary"> 
    </fieldset> 
    </form> 
</div> 

Answer 3

<div class="control-group"> 
    <label class="control-label" for="firstname">First Name</label> 
    <div class="controls"> 
    <input type="text" id="firstname" name="firstname"/> 
    </div> 
</div> 

同時，我們也可以把它簡單地作爲

<label>First name: 
    <input type="text" id="firstname" name="firstname"/> 
</label> 

Answer 4

的引導3文檔中標記的部分CSS文檔選項卡這個談判「需要自定義的寬度」，其中規定：

默認情況下，Bootstrap中的輸入，選擇和textareas是100％寬。 要使用內聯表格，您必須在表格 中設置一個寬度。

如果您使用瀏覽器和Firebug或Chrome工具來抑制或減少「寬度」樣式，您應該看到事情按照您想要的方式排列。很明顯，你可以創建合適的CSS來解決這個問題。

但是，我覺得很奇怪，我需要這樣做。我不禁感到這種操縱既煩人又長期，容易出錯。最終，我使用了一個虛擬類和一些JS來全局填充我所有的內聯輸入。這是少數案件，所以沒有太多的關注。

儘管如此，我也很想聽到有人有「正確」的解決方案，並可以消除我的墊片/黑客。

希望這會有所幫助，併爲您提供支持，因爲不會因爲Bootstrap 3問題而忽視您的請求而吹出墊片。

Answer 5

它似乎加入style="width:inherit;"到輸入工作正常。 jsfiddle demo

Answer 6

我有同樣的問題，這裏是我的解決方案：

<form method="post" class="form-inline form-horizontal" role="form"> 
     <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label> 
     <div class="input-group col-sm-7"> 
      <input class="form-control" type="email" name="email" placeholder="your.email@example.com"/> 
      <span class="input-group-btn"> 
       <button class="btn btn-primary" type="submit">Submit</button> 
      </span> 
     </div> 
    </form> 

這裏是Demo

Answer 7

我設法解決我的問題有。似乎工作正常，並且意味着我不必爲所有輸入手動添加寬度。

.form-inline .form-group input { 
width: auto; 
} 

Answer 8

我想這是你想要的，從引導文件「水平形式 使用引導程序的預定義的網格類加入.FORM水平的形式對齊的標籤和表單控件組中水平佈局。這樣做會改變.form-groups作爲網格行，所以不需要.row「。所以：

<form class="form-horizontal" role="form"> 
<div class="form-group"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
<div class="col-sm-10"> 
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
</div> 
</div> 
<div class="form-group"> 
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
    <div class="col-sm-10"> 
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 
    </div> 
</div> 
<div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
    <div class="checkbox"> 
     <label> 
     <input type="checkbox"> Remember me 
     </label> 
    </div> 
    </div> 
</div> 
<div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
    <button type="submit" class="btn btn-default">Sign in</button> 
    </div> 
</div> 
</form> 

小提琴：http://jsfiddle.net/beewayne/B9jj2/29/

Answer 9

把<label>外form-group：

<form class="form-inline"> 
    <label for="rg-from">Ab: </label> 
    <div class="form-group"> 
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control"> 
    </div> 
    <!-- rest of form --> 
</form> 

Answer 10

我相信你會已經找到你的答案...這裏是解決方案，我得到的在。

這是我的CSS。

.field, .actions { 
    margin-bottom: 15px; 
    } 
    .field label { 
    float: left; 
    width: 30%; 
    text-align: right; 
    padding-right: 10px; 
    margin: 5px 0px 5px 0px; 
    } 
    .field input { 
    width: 70%; 
    margin: 0px; 
    } 

而我的HTML ...

<h1>New customer</h1> 
<div class="container form-center"> 
    <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post"> 
    <div style="margin:0;padding:0;display:inline"></div> 

    <div class="field"> 
    <label for="customer_first_name">First name</label> 
    <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="customer_last_name">Last name</label> 
    <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="customer_addr1">Addr1</label> 
    <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="customer_addr2">Addr2</label> 
    <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="customer_city">City</label> 
    <input class="form-control" id="customer_city" name="customer[city]" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="customer_pincode">Pincode</label> 
    <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="customer_homephone">Homephone</label> 
    <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="customer_mobile">Mobile</label> 
    <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" /> 
    </div> 
    <div class="actions"> 
    <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" /> 
    </div> 
</form> 
</div> 

你可以看到這裏的工作示例... http://jsfiddle.net/s6Ujm/

PS：我是初學者也親設計師......隨意分享您的評論。

Answer 11

您可以從現有答案中看出Bootstrap的術語令人困惑。如果您查看自舉文檔，您會發現類型爲的橫向實際上是相互之間的字段，即大多數人會認爲是垂直形式的表單。頁面上正確的類是form-inline。他們可能會引入術語內嵌，因爲他們已經誤用了術語橫向。

從這裏的一些答案可以看出，有些人在一種形式中使用了這兩個類！其他人認爲他們需要窗體橫向時，他們實際上想要窗體在線。

我建議究竟做它作爲引導文檔中描述：

<form class="form-inline"> 
    <div class="form-group"> 
    <label for="nameId">Name</label> 
    <input type="text" class="form-control" id="nameId" placeholder="Jane Doe"> 
    </div> 
</form> 

主要生產：

Answer 12

您可以使用表格內聯類爲每個表單組:)

<form>      
    <div class="form-group form-inline">        
     <label for="exampleInputEmail1">Email address</label> 
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
    </div> 
</form> 

Answer 13

可以創建其中標籤和形式控制使用兩個方法的側這樣的形式中 -

1.串聯形式佈局

<form class="form-inline" role="form"> 
    <div class="form-group"> 
     <label for="inputEmail">Email</label> 
     <input type="email" class="form-control" id="inputEmail" placeholder="Email"> 
    </div> 
    <div class="form-group"> 
     <label for="inputPassword">Password</label> 
     <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
    </div> 
    <button type="reset" class="btn btn-default">Reset</button> 
    <button type="submit" class="btn btn-primary">Login</button> 
</form> 

2.水平表單佈局

<form class="form-horizontal"> 
    <div class="row"> 
     <div class="col-sm-4"> 
      <div class="form-group"> 
       <label for="inputEmail" class="control-label col-xs-3">Email</label> 
       <div class="col-xs-9"> 
        <input type="email" class="form-control" id="inputEmail" placeholder="Email"> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-5"> 
      <div class="form-group"> 
       <label for="inputPassword" class="control-label col-xs-3">Password</label> 
       <div class="col-xs-9"> 
        <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-3"> 
      <button type="reset" class="btn btn-default">Reset</button> 
      <button type="submit" class="btn btn-primary">Login</button> 
     </div> 
    </div> 
</form> 

您可以查看此頁面以獲得更多信息和現場演示 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Answer 14

您可以使用span標籤標籤

<div class="form-group"> 
    <label for="rg-from"> 
     <span>Ab:</span> 
     <input type="text" id="rg-from" name="rg-from" value="" class="form-control"> 
    </label> 
    </div>