2

我正在尝试使用 Twitter Bootstrap 实现以下目标：

我想在 Twitter Bootstrap 中的一行或一行上有一个简单的<input>字段和一个简单的字段。<button>它们应该覆盖列/父容器的整个宽度（即与 span12 的宽度相同）。我不想给按钮一个固定的 - 我希望按钮是流体宽度（宽度由按钮文本确定）。输入字段应使用按钮左侧的剩余空间。

这是一个小提琴：http: //jsfiddle.net/MgcDU/3202/

小提琴显示了向右对齐的按钮。

现在：如何让输入字段扩展到父容器的最左边缘？

当然，我想保留响应能力。

有任何想法吗？我确实更喜欢基于非 Javascript 的解决方案！

4

2 回答 2

3

完毕

http://jsfiddle.net/MgcDU/3251/

从这里使用方法：

http://boulderinformationservices.wordpress.com/2011/02/02/input-field-and-submit-button-on-the-same-line-full-width/

    <div class="container">
        <div class="row">
            <div style="width:100%;background-color:#d0d0d0;text-align:center;">Example of a Full row</div>
        </div>
        <div class="row">
            <div class="span12">
                <div class="pull-right">
                    <form class="form-inline">
                        <button type="submit" class="btn" style="float:right;">Button</button>
                        <div style="overflow: hidden; padding-right: .3em;">
                            <input style="height:1.6em;width:100%" type="text" placeholder="full width minus button width" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
于 2013-04-07T00:25:13.747 回答
1

您可以使用 jQuery 获取按钮的宽度，并获取父 span12 的宽度，然后将输入宽度设置为两者的差。如果按钮宽度必须是动态的，我认为没有其他方法。

于 2013-04-04T23:18:45.417 回答