Horizo​​ntally使用引導程序佈局內容

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> 

這將創建一個難看的頁面。它醜陋的原因是因爲控件沒有填滿整個寬度（因爲只使用了12個可用列中的11個）。另外，用破折號給列賦予了太多的空間。由於這些原因，我然後嘗試以下內容：

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