html - Bootstrap 在输入字段旁边放置两个字形图标

标签 html twitter-bootstrap css twitter-bootstrap-3

我有一个要求,我需要在下一个输入字段的右边放置两个字形,这样输入字段的宽度应该减小以容纳两个图标。 但下面的代码将字形带到下一行。

                                    <div class="row">
                                        <label>Managed Segment GOC</label>
                                        <div style="width:inherit;">
                                                <p>
                                                <input type="text" class="form-control" ng-model="formData.goc" placeholder="Look Up for Managed Segment">
                                                <span class="glyphicon glyphicon-arrow-up"></span>
                                                <span class="glyphicon glyphicon-arrow-down"></span>
                                                </p>
                                            <div class="text-right" >Clear</div>
                                        </div>

                                        <label>Default RLOB</label>
                                        <input type="text" class="form-control" ng-model="formData.rlob" placeholder="">
                                    </div>

最佳答案

你必须把你的文本框放在另一个类中=“col-md-*” 喜欢,

                                        <div>
                                            <p>
                                            <div class="col-md-11">
                                                <input type="text" class="form-control" placeholder="Look Up for Managed Segment" >
                                            </div>
                                            <div class="col-md-1">
                                                <span class="glyphicon glyphicon-arrow-up"></span>
                                                <span class="glyphicon glyphicon-arrow-down"></span>
                                            </div>
                                            </p>
                                        <div class="text-right" >Clear</div>
                                    </div>

关于html - Bootstrap 在输入字段旁边放置两个字形图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35446883/

相关文章:

javascript - 设置一个 JS 变量并在 html 标签中使用它

twitter-bootstrap - 如何在项目中同时使用 rtl 和 ltr bootstrap 5 sass 样式?

html - 内容 <div> 背景颜色不正确

jquery - 为什么新添加的输入没有调用自动完成功能?

html - 为什么 Live Server 不从 Visual Studio 预览我的 CSS?

html - 如何在 bootstrap 中将列居中?

php - 无法获取 Bootstrap 布局上列的内容以与列左侧对齐

html - flowplayer 定位不正确

javascript - 多div选择onclick

javascript - 如果页面已经稍微滚动,为什么这不起作用?