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>