2

I want to create a really nice contact form with icons and full width input fields (span12).

I use these frameworks:

  • Twitter bootstrap
  • Font Awesome 3.0
  • jQuery

But the input fields extend/overflow the amount of the icon. Please help!

    <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>
4

1 回答 1

1

似乎在 Bootply 上看起来不错（http://bootply.com/60556）你是如何包括 bootstrap.css、bootstrap-responsive.css、font-awesome 等的？

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

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

我更新了演示

于 2013-05-03T12:34:19.380 回答