Question

我创建了这个示例：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？

Answer 1

首先，你需要删除引导程序在输入字段上放置的宽度，方法是用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>

Bootstrap：如何扩展输入以占用可用空间？

1 个答案: