示例2中怎么再加图标？

源自：3-14 表单提示信息

示例2中怎么再加图标？

这样加上去为什么图标显示错位。

<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>

提问者：耂虍 2016-12-18 16:12

个回答

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;
}

0
Ben_0010

2017-04-02 23:00:53

在行内提示语中，如果添加图标会出现错位的情况。
这是因为 .form-control-feedback 中的参考位置被 .col-xs-6 所改变了，正确的参考位置应该是 .has-feedback 。
如果你删除了 .col-xs-6 了，那么将会影响到行内提示语的位置和<input> 的样式。
所以需要在行内提示语中，添加图标，需要自己造轮子，不能使用 Bootstrap 内的图标。
本人愚见。

0
南风寄羽3432529

2016-12-18 16:22:02

为什么你要加入网格

0