<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 [...]”应该是一行。
最佳答案
有几种方法可以解决这个问题。 这是我会怎么做。
<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%;
}
关于css - Bootstrap - col-xs-6 容器中的输入框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28112024/