css - Bootstrap - col-xs-6 容器中的输入框

Question

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6 text-left">
            Search
            <span>
                <input style="width:100%" type="text" />
            </span>
        </div>

        <div class="col-xs-6 text-right">
            <span>...</span>
        </div>
    </div>
</div>

如何确保上面的输入框是容器大小减去文本“搜索”的 100%？

JSFIDDLE:http://jsfiddle.net/c9kprdqh/

更新:我希望“搜索 [...]”成为 col-xs-6 容器的 100%。所以换句话说，我需要“[...]”作为容器的其余部分(减去搜索文本)，但我不确定如何执行此操作。

更新:我希望将以上内容放在一行中。所以“Search [...]”应该是一行。

Answer 1

Fiddle

有几种方法可以解决这个问题。这是我会怎么做。

<span>Search</span>
<div id="rest">
    <input></input>
</div>

span {
  float:left;
}
//rest = a div containing the input element
#rest {
  overflow: hidden;
  width: auto;
}
//Finally the input
input {
  width: 100%;
}