twitter-bootstrap-3 - 当一列有textarea时,如何在引导行中垂直定位字体真棒图标
问题描述
我希望最右侧列中的标志垂直位于“行”的中间
寻找引导程序 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=""> </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>
</div>
</div>
</div>
</div>
</div>
解决方案
就是这个:
<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=""> </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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
你可以看到:https ://jsfiddle.net/sugandhnikhil/vdhmjn17/
谢谢!!
推荐阅读
- python - 如何在 tf.keras 1.14 中使用 ReLU 和连接层克隆模型?
- python - 在后面的函数中打印在前面的函数中返回的值
- f# - F# 字符串连接挂起异步计算
- javascript - 隐藏带星号的文本
- r - 如何避免在 R 中以科学计数法显示值?
- assembly - x86-64 做地址计算 mov ie mov i(r, r, i), r 在端口 1 上执行吗?还是还是p0156?
- apache-spark - 连接结构数组的方法
- javascript - 如何动态更新正在运行的 NodeJS 代码
- r - 如何在交付/接收较早的订单之前知道下一个订单的客户?在 R 中
- reinforcement-learning - 下一个状态与同一集的 prev_state 相同时的深度强化学习行为