示例2中怎么再加图标？
耂虍
2016-12-18 16:12
这样加上去为什么图标显示错位。
<h3>示例2</h3> <form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功状态</label> <div class="row"> <div class="col-xs-6"> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <span class="col-xs-6 help-block">你输入的信息是正确的</span> </div> </div>
3回答
-
- qq_L_bqyANO
- 2018-11-26 16:41:47
在span的父级盒子上加has-feedback , 因为图标的样式位置是根据这个类名来的
<div class="col-xs-6 has-feedback">
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
其次 在当前页面加个样式盖过给的样式 因为在的位置不一样了 所以定位的位置也不一样了 只要改变他的top值和right值就可以了
.has-feedback .form-control-feedback{
position: absolute;
top: 0px;
right: 15px;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
}
-
- Ben_0010
- 2017-04-02 23:00:53
在行内提示语中，如果添加图标会出现错位的情况。
这是因为 .form-control-feedback 中的参考位置被 .col-xs-6 所改变了，正确的参考位置应该是 .has-feedback 。
如果你删除了 .col-xs-6 了，那么将会影响到 行内提示语的 位置和<input> 的样式。
所以需要在 行内提示语中，添加图标，需要自己造轮子，不能使用 Bootstrap 内的图标。
本人愚见。
-
- 南风寄羽3432529
- 2016-12-18 16:22:02
为什么你要加入网格
玩转Bootstrap（基础）
314543 学习 · 2275 问题
相似问题