Question

我想用图标和全宽输入字段（span12）创建一个非常好的联系表单。

我使用这些框架：

Twitter bootstrap
Font Awesome 3.0
的jQuery

但是输入字段会扩展/溢出图标的数量。请帮忙！

    <div class="row">
        <div class="container">
            <h1>Contat us</h1>

                <div class="control-group">
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-user"></i></span>
                            <input class="span12" placeholder="Full name" id="inputIcon" type="text" required="required">
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-envelope"></i></span>
                            <input class="span12" placeholder="Your Email" id="inputIcon" type="email" required="required">
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-phone"></i></span>
                            <input class="span12" placeholder="Telephone" id="inputIcon" type="tel">
                        </div>
                    </div>
                </div>

                <div class="btn-toolbar">
                  <div class="btn-group" required="required">
                        <button class="btn" href="#"><i class="icon-coffee"></i> Question</button>
                        <button class="btn" href="#"><i class="icon-plus-sign-alt"></i> Suggestions</button>
                        <button class="btn" href="#"><i class="icon-stethoscope"></i> Product Support</button>
                        <button class="btn" href="#"><i class="icon-suitcase"></i> Job application</button>
                    </div>
                </div>



                <div class="controls">
                    <textarea id="message" name="message" class="span12" placeholder="Your Message" rows="5" required="required"></textarea>
                </div>

                <p>
                <label class="checkbox">
                    <input type="checkbox"> Sign up for our newsletter
                </label>
                <button class="btn btn-primary" type="button">Send</button>
                </p>
            </div>
    </div>

Answer 1

似乎在Bootply上看起来很好（http://bootply.com/60556）你如何包括bootstrap.css，bootstrap-responsive.css，font-awesome等。？

编辑 - 啊，现在我看到了问题。这可能是一个Bootstrap错误。解决方法是覆盖input.span12 CSS，如下所示：

.input-prepend input.span12  {
    width: 1129px;
}

I updated the demo

Twitter引导程序溢出输入附加图标

1 个答案: