輸入左側的引導輸入標籤（而不是頂部）

Question

我對Bootstrap相當陌生，我試圖製作一個簡單的表單，其中的所有元素都在屏幕上的一行中。我的表單的代碼如下所示：

<form class="form-horizontal"> 
    <fieldset> 
     <div class="form-container"> 
      <div class="form-group"> 
       <label>Search by:</label> 
       <input class="form-control" type="text"> 
      </div> 
      <div class="form-group"> 
       <label>Something:</label> 
       <input class="form-control" type="text"> 
      </div> 
     </div> 
    </fieldset> 
</form> 

默認情況下，我的輸入字段的標籤出現在輸入字段中。我希望它們位於輸入字段的左側。我已經在Google上搜索並檢查瞭如何實現這一點，但沒有發現我找到的解決方案（我嘗試將類添加到表單並更改它們的CSS，並嘗試使用引導程序的表單內聯功能）。

有誰知道我怎麼能讓窗體看起來如何我想看看？

Answer 1

爲了利用引導網格系統，您需要對每個表單組進行兩項修改。

不知道你正在使用的BS的版本，但電網是同一個概念：https://v4-alpha.getbootstrap.com/layout/grid/

你將要使用的自舉電網系統定義的標籤和輸入都在同一行。請記住，有12列1行，以便項目要在同一行必須加起來12

1. 以下類添加到您的標籤：「COL-LG-2同事MD-2 COL-SM-2控制標籤」

2. 包裝你輸入一個div並添加以下類別： 「COL-LG-10 COL-MD-10 COL-SM-10」

你會注意到，在這兩個元素之間，列在自舉網格系統中加起來爲12，所以它們將在同一行上。

（I也包裹這在容器中剛纔這篇文章上的一個更整潔顯示器）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
<div class="container"> 
 
<form class="form-horizontal"> 
 
    <fieldset> 
 
     <div class="form-container"> 
 
      <div class="form-group"> 
 
       <label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Search by:</label> 
 
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
 
        <input class="form-control" type="text"> 
 
       </div> 
 
       <label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Something:</label> 
 
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
 
        <input class="form-control" type="text"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </fieldset> 
 
</form> 
 
</div>