Горизонтальное оформление содержимого с помощью Bootstrap

Question

Я работаю над приложением, которое использует Bootstrap. У меня есть столбец справа от страницы (похожие на «заданные», «просмотренные», «горячие мета-сообщения», «рабочие места» на странице этого вопроса). В этой колонке мне нужно добавить некоторые элементы управления, которые позволят пользователю ввести диапазон значений. Я хочу, чтобы эти элементы управления заполнили доступное пространство. Они должны выглядеть примерно так:

[textbox] - [textbox] 
start  finish 

В попытке создать это, я следующее:

<div class="row"> 
    <div class="col-xs-5"> 
    <input type="text" class="form-control" /> 
    </div> 

    <div class="col-xs-1"> 
    - 
    </div> 

    <div class="col-xs-5"> 
    <input tpe="text" class="form-control" /> 
    </div> 
</div> 

Это создает уродливую выглядящую страницу. Причина его уродства заключается в том, что элемент управления не заполняет всю ширину (потому что используется только 11 из 12 доступных столбцов). Кроме того, слишком большое пространство присваивается столбцу с тире. По этим причинам я затем попробовал следующее:

<ul class="list-inline"> 
    <li><input type="text" class="form-control" /></li> 
    <li>-</li> 
    <li><input type="text" class="form-control" /></li> 
</ul> 

Этот подход занимал доступную ширину. Тем не менее, мои текстовые поля теперь сложены друг на друга. Есть ли способ выполнить то, что я пытаюсь сделать с помощью CSS? Если да, то как?

Спасибо!

Answer 1

Попробуйте следующий код я надеюсь, что это позволит решить проблему,

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