Bootstrap ：从输入框右边缘出来的字形图标

jdzmm42g 于 2022-12-20 发布在 Bootstrap

关注(0)|答案(2)|浏览(136)

我尝试在表单中添加glyphicon用于bootstrap（bootstrap.min.css）的验证，我不希望表单的输入字段拉伸并跨越整个浏览器窗口的宽度

所以我把输入域放在了网格中（col-sm-x），现在我想使用输入框右边的符号进行验证。当我移除网格样式时，它可以正常工作，但是我不希望输入域太宽，并且使用符号。

<div class="form-group has-success has-feedback">
        <label class='control-label' for='p_name'>Name of Corner: </label>
        <div class='row'>
            <div class='col-sm-4'>
                <input id='p_name' name='p_name' type='text' class='form-control' placeholder="Santy's Burgers">
                <span class='glyphicon glyphicon-ok form-control-feedback' area-hidden='true'></span>
            </div>
        </div>
    </div>

接下来是

右侧的字形图标位于输入正文之外

twitter-bootstrap

来源：https://stackoverflow.com/questions/27996840/bootstrap-glyphicon-icon-going-out-of-the-input-boxes-right-edge

2条答案

按热度按时间

7fyelxc51#

你将需要添加一个类到输入和字形像
和给定类相对位置

.right-inner-addon {
    position: relative;
}

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css"/>
<div class="form-group has-success has-feedback">
        <label class='control-label' for='p_name'>Name of Corner: </label>
        <div class='row'>
            <div class='col-sm-4'>
              <div class="right-inner-addon">
                <input id='p_name' name='p_name' type='text' class='form-control' placeholder="Santy's Burgers">
                <span class='glyphicon glyphicon-ok form-control-feedback' area-hidden='true'></span></div>
            </div>
        </div>
    </div>

赞(0）回复(0）举报 2022-12-20

t5fffqht2#

你的代码没有错误。只要把你的代码封装在一个类似这样的表单中，并使用class=“form-horizontal”就可以了。

<form class="form-horizontal" role="form">
 <!-- your code -->
</form>

赞(0）回复(0）举报 2022-12-20

我来回答

Bootstrap ：从输入框右边缘出来的字形图标

2条答案

相关问题

热门标签

最新问答