我创建了以下示例:jsFiddle
<div class="container">
<div class="row">
<div class="span6">
<ul class="thumbnails">
<li class="span4">
<div style="height:200px; position: relative" class="thumbnail">
<div style="position: absolute; left: 5px; right: 5px; bottom:5px;">
<form style="margin:0;" class="form-inline">
<input style="margin: 3px 0 0 0;" type="text" placeholder="Name…" ng-model="mashName" class="pull-left span3" />
<button type="submit" style="margin: 3px 0 0 0; " class="span1 btn btn-primary pull-right">Create</button>
</form>
</div>
</div>
</li>
</ul>
</div>
我需要的是将输入扩展到按钮,而无需使用百分比来调整大小。这个例子非常接近,但是使用span拧紧了按钮。
.input-block-level
很不错,但是它一直延伸到..相反,它应该在按钮之前停止。有没有办法解决此问题而无需使用JavaScript? 最佳答案
首先,您需要通过使用width: auto
覆盖引导程序来删除引导程序放置在输入字段上的宽度,然后使用绝对定位来提供适当的宽度..以与其包含的div的宽度一致。
我创建了一个jsFiddle:http://jsfiddle.net/w8YfL/
这是代码:
<div class="container">
<ul class="thumbnails">
<li class="span4">
<div style="height:200px; position: relative" class="thumbnail">
<div style="position: absolute; left: 5px; right: 5px; bottom:5px;">
<form style="margin:0;" class="form-inline">
<input style="position: absolute; right: 70px; left: 0; bottom: 0; width: auto;" type="text" placeholder="Name…" ng-model="mashName"/>
<button type="submit" style="position: absolute; right: 0; bottom: 0;" class="btn btn-primary">Create</button>
</form>
</div>
</div>
</li>
</ul>
</diV>
关于css - Bootstrap:如何扩展输入以占用可用空间?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18411166/