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％减去文本＆＃34;搜索＆＃34; ？

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

更新：我喜欢＆＃34;搜索[...]＆＃34;成为col-xs-6容器的100％。换句话说，我需要＆＃34; [...]＆＃34;作为容器的其余部分（减去搜索文本），但我不知道如何做到这一点。

更新：我希望上面的内容在一条线上。所以＆＃34;搜索[...]＆＃34;应该是一行。

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%;
}