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

Question

我正在尝试在具有 2 个文本框的表单上显示年份范围输入。一个用于最小值，一个用于最大值，并用破折号分隔。

我希望使用引导程序将这一切都放在同一行，但我似乎无法让它正常工作。

这是我的代码：

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

这是现在的样子：

Answer 1

问题是.form-control 类呈现像DIV 元素，根据normal-flow-of-the-page 在新行上呈现。

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

还有其他处理此问题的方法（例如将您的 form-control 组件安排在任何 .col 类中），但最简单的方法是让您的 .form-control 成为 inline 元素（方式span 会渲染）

Answer 2

使用input group 在同一行设置样式怎么样？

这是要使用的最终 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>

看起来像这样：

这是一个堆栈片段演示：

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

Answer 3

引导程序 3.3.7：

使用form-inline。

它只适用于大于 768px 的屏幕分辨率。要测试下面的 sn-p，请确保单击“扩展 sn-p”链接以获得更宽的查看区域。

        <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

Answer 4

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

Answer 5

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

Answer 6

对于引导程序 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>

Answer 7

只需将两个输入放在一个具有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>

Answer 8

你检查过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>