Question

我正在使用一个使用Bootstrap的应用程序。我在页面右侧有一个列（类似于＆＃34;询问＆＃34;，＆＃34;已查看＆＃34;，＆＃34;热门元帖＆＃34;，＆＃34;工作＆＃ 34;这个问题的页面区域）。在该列中，我需要添加一些控件，以允许用户输入一系列值。我希望这些控件填满可用空间。他们需要看起来像这样：

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

使用Bootstrap水平布局内容

1 个答案: