Twitter引导溢出输入附加图标

Question

我想创建一个带有图标和全宽输入字段 (span12) 的非常好的联系表单。

我使用这些框架：

• Twitter 引导程序
• 字体真棒 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 等的？

EDIT - 啊，现在我看到了问题所在。这可能是一个引导程序错误。一种解决方法是像这样覆盖input.span12 CSS：

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

I updated the demo