twitter-bootstrap-3 - 当一列有textarea时，如何在引导行中垂直定位字体真棒图标

Question

我希望最右侧列中的标志垂直位于“行”的中间

寻找引导程序 3 解决方案

这是我的代码：

   <div class="panel panel-primary" id="panelid">
            <div class="panel-heading">
                <h1 class="panel-title">Panel Title <i class="fa fa-info-circle fa-fw" aria-hidden="true" style="cursor:pointer;"></i> </h1>
            </div>
            <div class="panel-body">
                <div class="well well-sm ">
                    <div class="row form-row">
                        <div class="form-group col-xs-11 col-sm-4 col-lg-3">
                            <label class="field-label control-label" id="Field1_Label" for="Field1">Field 1</label>
                            <sup><i title="A Required Field" class="fa fa-fw fa-asterisk text-danger" aria-hidden="true" style="cursor:default" aria-label="A Required Field"></i></sup>
                            <select name="Field1" class="form-control input-sm" id="Field1" onchange="" data-required="true" data-field-id="1">
                                <option value="">&nbsp;</option>
                                <option value="1">Yes</option>
                                <option selected="selected" value="0">No</option>
                            </select>
                        </div>
                        <div class="form-group col-xs-11 col-sm-7 col-lg-8">
                            <label class="field-label control-label" id="Comments_desc_Label" for="comments">Field 1 Comments</label>
                            <textarea name="comments" class="form-control " id="comments" placeholder="Enter Comments" rows="3" cols="20" data-required="false"></textarea>
                        </div>
                        <div class="col-xs-1">
                            <i class="text-danger fa fa-flag fa-2x fa-fw"></i>&nbsp; 
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

就是这个：

<div class="panel panel-primary" id="panelid">
        <div class="panel-heading">
            <h1 class="panel-title">Panel Title <i class="fa fa-info-circle fa-fw" aria-hidden="true" style="cursor:pointer;"></i> </h1>
        </div>

        <div class="panel-body">
            <div class="well well-sm ">
                <div class="container">
                    <div class="row>">
                        <div class="form-group">
                            <div class="col-xs-11 col-sm-4 col-lg-3">
                                <label class="field-label control-label" id="Field1_Label" for="Field1">Field
                                    1</label>
                                <sup><i title="A Required Field" class="fa fa-fw fa-asterisk text-danger"
                                        aria-hidden="true" style="cursor:default"
                                        aria-label="A Required Field"></i></sup>
                                <select name="Field1" class="form-control input-sm" id="Field1" onchange="" data-required="true" data-field-id="1">
                                    <option value="">&nbsp;</option>
                                    <option value="1">Yes</option>
                                    <option selected="selected" value="0">No</option>
                                </select>
                            </div>
                        </div>


                        <div class="form-group">
                            <div class="col-xs-11 col-sm-7 col-lg-8">
                                <label class="field-label control-label" id="Comments_desc_Label" for="comments">Field 1
                                    Comments</label>
                                <textarea name="comments" class="form-control " id="comments" placeholder="Enter Comments" rows="3" cols="20" data-required="false"></textarea>
                            </div>
                        </div>
                        <div class="col-xs-1 col-sm-1 col-lg-1">
                            <i class="glyphicon glyphicon-flag" style="color: #A54142; font-size: 20px; padding-top: 30px;"></i>&nbsp;
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

你可以看到：https ://jsfiddle.net/sugandhnikhil/vdhmjn17/

谢谢！！