显示两个在引导表单域并排 [英] Display two fields side by side in a Bootstrap Form

问题描述

我想，有一个文本框2窗体上显示一年范围的输入。一个用于分钟，一个用于最大值和由破折号隔开。

我想这一切都使用自举同一直线上，但我似乎无法得到它才能正常工作。

下面是我的code：

 ＆LT;表ID =Form1的阶级=形横角色=形式=服务器＆GT;
    ＆LT; D​​IV CLASS =行＆GT;
        ＆LT; D​​IV CLASS =表单组＆GT;
            ＆LT;标签=tbxContactPhone级=COL-SM-2控制标签＆GT;＆年LT; /标签＆gt;
            ＆LT; D​​IV CLASS =COL-SM-4＆GT;
                ＆LT; ASP：文本框ID =TextBox1中的CssClass =表格控=服务器MAXLENGTH =4/＆GT;
            ＆LT; / DIV＆GT;
            ＆LT;标签类=COL-SM-2控制标签＆GT;  - ＆LT; /标签＆gt;
            ＆LT; D​​IV CLASS =COL-SM-4＆GT;
                ＆LT; ASP：文本框ID =TextBox2中的CssClass =表格控=服务器MAXLENGTH =4/＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; /表及GT;
 

下面是它看起来像现在：

解决方案

如何使用输入组以风格它在同一行？

下面是最终的HTML使用

＆LT; D​​IV CLASS =输入组＆GT;
    ＆LT;输入类型=文本级=表格控占位=开始/＆GT;
    ＆LT;跨度类=输入组插件＆GT; - ＆LT; / SPAN＆GT;
    ＆LT;输入类型=文本级=表格控占位=结束/＆GT;
＆LT; / DIV＆GT;


这看起来像这样

下面是一个堆栈片段演示

\r

\r

＆LT;链接HREF =htt​​p://maxcdn.bootstrapcdn.com/bootstrap /3.2.0/css/bootstrap.css的rel =stylesheet属性/＆GT;\r
\r
＆LT; D​​IV CLASS =输入组＆GT;\r
    ＆LT;输入类型=文本级=表格控占位=开始/＆GT;\r
    ＆LT;跨度类=输入组插件＆GT; - ＆LT; / SPAN＆GT;\r
    ＆LT;输入类型=文本级=表格控占位=结束/＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

我会离开它作为一个练习读者把它翻译成 ASP：文本框元素

I am trying to display a year range input on a form that has a 2 textboxes. One for the min and one for the max and are separated by a dash.

I want this all on the same line using bootstrap, but I cannot seem to get it to work correctly.

Here's my code:

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

Here's what it looks like now:

解决方案

How about using an input group to style it on the same line?

Here's the final HTML to use:

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

Which will look like this:

Here's a Stack Snippet Demo:

<link href="http://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>

I'll leave it as an exercise to the reader to translate it into an asp:textbox element

这篇关于显示两个在引导表单域并排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！