glyphicons bootstrap 图标与文本区域不对齐

Question

glyphicons 图标高于 textarea 输入。

<div class="form-group">
<div class="col-md-8 inputGroupContainer">
    <label class="label-margin" for="name"><span class="label-required">* 
  </span>Message</label>
        <div class="input-group"><span class="input-group-addon"><i 
   class="glyphicon glyphicon-align-left" ></i></span>
            <textarea class="message" cols="35" id="message" name="message" 
  rows="8"></textarea>
        </div>
    </div>
  </div>

Answer 1

只需将 form-control class 添加到文本区域，如下所示

<div class="form-group">
<div class="col-md-8 inputGroupContainer">
    <label class="label-margin" for="name"><span class="label-required">* 
  </span>Message</label>
        <div class="input-group"><span class="input-group-addon"><i 
   class="glyphicon glyphicon-align-left" ></i></span>
            <textarea class="message form-control" cols="35" id="message" name="message" 
  rows="8"></textarea>
        </div>
    </div>
  </div>

工作fiddle

fiddle link

glyphicons bootstrap 图标与文本区域不对齐

glyphicons bootstrap icon not align with textarea

css

twitter-bootstrap

glyphicons