输入左侧的引导输入标签（而不是顶部）

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>