在引导表单中并排显示两个字段

我试图在一个有两个文本框的表单上显示一个年度范围输入。一个是最小值，一个是最大值，中间用破折号隔开。

我希望这一切都在同一行使用自举，但我似乎不能得到它的工作正确。

这是我的密码:

<form id="Form1" class="form-horizontal" role="form" runat="server">
<div class="row">
<div class="form-group">
<label for="tbxContactPhone" class="col-sm-2 control-label">Year</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" MaxLength="4" />
</div>
<label class="col-sm-2 control-label">-</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox2" CssClass="form-control" runat="server" MaxLength="4" />
</div>
</div>
</div>
</form>

现在看起来是这样的:

screenshot

128469 次浏览
小开

问题在于 .form-control类的呈现方式类似于 DIV元素，根据 normal-flow-of-the-page在新行上的呈现方式，DIV元素的呈现方式类似于 DIV元素。

解决这类问题的一种方法是使用 display:inline属性。因此，使用 display:inline创建一个自定义 CSS类，并使用 .form-control类将其附加到组件。您的组件也必须有一个 width。

还有其他处理这个问题的方法(比如在任何 .col类中安排您的 form-control组件) ，但是最简单的方法是将您的 .form-control变成 inline元素(span呈现的方式)

小开
最佳答案

如何使用 输入组的样式它在同一行？

下面是使用 的最终 HTML:

<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
</div>

它看起来像这样 :

screenshot

这里有一个堆栈代码片段演示 :

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>


<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
</div>

我将把它作为一个练习留给读者，让他们把它翻译成 asp:textbox元素

小开

Bootstrap 3.3.7:

使用 form-inline。

不过，它只能在分辨率大于768px 的屏幕上工作。要测试下面的代码片段，请确保单击“展开代码片段”链接以获得更广泛的查看区域。

        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<form class="form-inline">
<input type="text" class="form-control"/>-<input type="text" class="form-control"/>
</form>

参考资料: https://getbootstrap.com/docs/3.3/css/#forms-inline

小开

@ KyleMit 对 Bootstrap 4的回答有了一些改变

<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-prepend">
<span class="input-group-text">-</span>
</div>
<input type="text" class="form-control">
</div>
小开

@ KyleMit 答案是解决这个问题的一种方法，但是我们可以选择避免 input-group类实现的不可分割输入字段。更好的方法是在父 div上使用 form-group和 row类，并在引导程序提供的网格系统类中使用 input元素。

<div class="form-group row">
<input class="form-control col-md-6" type="text">
<input class="form-control col-md-6" type="text">
</div>
小开

为了4号鞋带

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<div class="input-group-prepend">
<span class="input-group-text" id="">-</span>
</div>
<input type="text" class="form-control" placeholder="End"/>
</div>

小开

只需将两个输入放在一个类为 form-group的 div 中，并在 div 样式上设置 display flex

<form method="post">
<div class="form-group" style="display: flex;"><input type="text" class="form-control" name="nome" placeholder="Nome e sobrenome" style="margin-right: 4px;" /><input type="text" class="form-control" style="margin-left: 4px;" name="cpf" placeholder="CPF" /></div>
<div class="form-group" style="display: flex;"><input type="email" class="form-control" name="email" placeholder="Email" style="margin-right: 4px;" /><input type="tel" class="form-control" style="margin-left: 4px;" name="telephone" placeholder="Telefone" /></div>
<div class="form-group"><input type="password" class="form-control" name="password" placeholder="Password" /></div>
<div class="form-group"><input type="password" class="form-control" name="password-repeat" placeholder="Password (repeat)" /></div>
<div class="form-group">
<div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" />I agree to the license terms.</label></div>
</div>
<div class="form-group"><button class="btn btn-primary btn-block" type="submit">Sign Up</button></div><a class="already" href="#">You already have an account? Login here.</a></form>
小开

你查过 Boostrap 网站了吗? 搜索“表格”

<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>

提交答案