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>

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

有谁知道如何让表格看起来我想要它看起来如何？

Answer 1

您需要对每个表单组进行两次修改才能使用引导网格系统。

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

您将需要使用引导网格系统来定义标签和输入是同一行。请注意，1行中有12列，因此您希望位于同一行的项目最多可以添加12列。

将以下类添加到标签中：＆＃34; col-lg-2 col-md-2 col-sm-2 control-label＆＃34;
将您的输入包装在div中并添加以下类：＆＃34; col-lg-10 col-md-10 col-sm-10＆＃34;

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

（我还把它包装在一个容器中，只是为了在这篇文章上更整洁地显示）

＆＃13;

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

＆＃13;

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

1 个答案: