引导将两个符号放置在输入字段旁边。

Question

我有一个要求，我需要将两个象形文字放在下一个输入字段，这样输入字段的宽度应该减小，以适应这两个图标。但在下面的代码中，符号将转到下一行。

                                    <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

你得把你的文本框放到另一个class=“col*”里，

                                        <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)，所以图标站在旁边的输入框现在。

代码如下：

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