Question

我正在尝试使用Twitter Bootstrap实现以下功能：

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

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

小提琴显示按钮右侧对齐。

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

我当然希望保留响应能力。

有什么想法吗？我更喜欢非基于Javascript的解决方案！

Answer 1

完成

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>

Answer 2

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

输入字段和提交按钮覆盖Twitter Bootstrap中一行/行的完整列宽

2 个答案: