Question

我有一个要求，我需要在下一个输入字段放置两个glyphicons，这样输入字段的宽度应该减少以容纳这两个图标。但是下面的代码将字形符号带到下一行。

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

Answer 1

您必须将文本框放在另一个类=“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>

Answer 2

这可能会有所帮助。

<div class="row">
    <div class='col-xs-10'>
        <input type='text' class="form-control">
    </div>
    <div class='col-xs-1'>
       <span class="glyphicon glyphicon-arrow-up"></span>
   </div>
   <div class='col-xs-1'>
       <span class="glyphicon glyphicon-arrow-down"></span>
   </div>
</div>

Answer 3

我只是删除第一个输入标签的表单控件，然后用col-md-11替换（你可以用任意数字替换11），所以glyphicons现在就在输入框旁边。

代码如下：

     <input type="text" class="col-md-11" 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>

Bootstrap将两个glyphicons放在输入字段旁边

3 个答案: