带有图标引导程序的文本区域未正确对齐

Question

我正在创建类似这样的引导联系表格：http://amitpatil.me/demos/twitter-bootstrap-ajax-contact-form/contact.php

到目前为止，我在正文中有这个：

<div class="container">

    <form role="form" style="width:400px; margin: 0 auto;">
        <h1>Contact us</h1>

        <div class="form-group required-field-block">                
            <div class="col-md-12 input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-info-sign"></span></span>
                <input type="text" size="30" value="" class="form-control" placeholder="Podjetje">
                <div class="required-icon">
                    <div class="text">*</div>
                </div>                  
            </div>
        </div>

        <div class="form-group required-field-block">       
            <div class="col-md-12 input-group">
                <div class="col-sm-1 column">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
                </div>
                <div class="col-sm-11 column">
                    <textarea rows="3" size="30" value="" class="form-control" placeholder="Sporočilo"></textarea>  
                    <div class="required-icon">
                        <div class="text">*</div>
                    </div>
                </div>
            </div>
        </div>

        <button class="btn btn-primary razmik_mail">Pošlji</button>

    </form>

但这做到了：

如您所见，我的“Textarea”没有正确对齐。图标应该在（信息图标）和完整图标下方，如您所见，它有剪切图标，我不知道为什么。并且 textarea 应该与输入相匹配，并且时间长一点（如链接中所示）。

所以我的目标是创建这样的文本区域：

任何想法，我错在哪里？非常感谢您的帮助。

这里是演示：http://jsfiddle.net/tutpgtdo/5/

Answer 1

你的文本区域周围有额外的 HTML 列，删除它应该没问题，所以它应该如下所示：

<div class="form-group required-field-block">       
        <div class="col-md-12 input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
            <textarea rows="3" size="30" value="" class="form-control" placeholder="Sporočilo"></textarea>  
                <div class="required-icon">
                    <div class="text">*</div>
                </div>
        </div>
    </div>