Отображение двух полей бок о бок в форме загрузки

Я пытаюсь отобразить вход диапазона года в форме, содержащей 2 текстовых поля. Один для min и один для max и разделены тире.

Я хочу, чтобы все это было в одной строке, используя 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

Ответы

Ответ 1

Как насчет использования группы ввода для ее стилизации в одной строке?

Здесь последний 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>

Ответ 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>

Ответ 3

Проблема заключается в том, что класс .form-control отображается как элемент DIV, который в соответствии с normal-flow-of-the-page отображает в новой строке.

Одним из способов устранения таких проблем является использование свойства display:inline. Итак, создайте собственный CSS класс с display:inline и присоедините его к вашему компоненту с классом .form-control. Вы должны иметь width для своего компонента.

Существуют и другие способы решения этой проблемы (например, размещение ваших компонентов form-control внутри любого из классов .col), но самый простой способ - просто сделать ваш элемент .form-control a inline (способ a span будет отображаться)

Ответ 4

Не уверен, что это было доступно в 2014 году, но вы можете теперь.

Он работает только при разрешении экрана, превышающем 768 пикселей.

Действует для BS 3.3.7:

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

Ответ 5

Ответ @KyleMit - это один из способов решить эту проблему, однако мы можем предпочесть избегать неразделенных полей ввода, полученных классом группы input-group. Лучший способ сделать это - использовать классы form-group и row в родительском div и использовать input элементы с классами grid-системы, предоставляемыми бутстрапом.

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