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

Question

我是 Bootstrap 的新手，我正在尝试制作一个简单的表单，所有元素都在屏幕上的一行中。我的表单 html 代码如下所示：

<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> 

默认情况下，我的输入字段的标签显示在输入字段的周围。我希望它们位于输入字段的左侧。我已经用谷歌搜索并在这里检查了如何实现这一点，但我发现的解决方案都没有奏效（我尝试向我的表单添加类并更改它们的 CSS，并尝试使用引导程序的表单内联功能）。

有谁知道我怎样才能使表单看起来像我想要的样子？

Answer 1

为了利用引导网格系统，您需要对每个表单组进行两次修改。

不确定您使用的是哪个版本的 BS，但对于网格，它是相同的概念：https://v4-alpha.getbootstrap.com/layout/grid/

您将需要使用引导网格系统来定义标签和输入是同一行。请记住，1 行中有 12 列，因此您希望位于同一行的项目必须加起来为 12。

1. 将以下类添加到您的标签中：“col-lg-2 col-md-2 col-sm-2 control-label”

2. 将您的输入包装在一个 div 中并添加以下类：“col-lg-10 col-md-10 col-sm-10”

您会注意到，在这两个元素之间，列加起来为 12，因此在引导网格系统中，它们将位于同一行。

（我也将它包装在一个容器中，只是为了在这篇文章中更整洁地展示）

<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>