Question

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

我希望这一切都在使用bootstrap的同一行，但我似乎无法让它正常工作。

这是我的代码：

<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

Answer 1

如何使用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>

看起来像这样：

screenshot

这是一个Stack Snippet Demo ：

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

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

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

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

还有其他方法可以解决此问题（例如在form-control个类中排列.col个组件），但最简单的方法是让.form-control成为inline 1}}元素（span将呈现的方式）

Answer 4

不确定这是否在2014年可用，但您现在可以。

它仅适用于大于768像素的屏幕分辨率。

适用于BS 3.3.7：

＆＃13;

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

＆＃13;

不幸的是，如果您运行代码段，它就不会在这里看起来，因为它位于宽度较窄的框架中，但是如果您将其复制到其他地方并在宽屏幕上运行它将会工作。我刚注意到有一个＆＃34;全屏＆＃34; stackoverflow中的按钮，单击它，你就可以看到它。

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

Answer 5

对于Bootstrap 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 6

只需将两个输入放入类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 7

您是否查看了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>

Answer 8

@KyleMit答案是解决此问题的一种方法，但是我们可以选择避免使用input-group类实现的未分割输入字段。更好的方法是在父form-group上使用row和div类，并在Bootstrap提供的网格系统类中使用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>

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

8 个答案: