Bootstrap如何在输入框旁边放置两个图标？

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>

- josh_boaz

Answer 1

您需要将文本框放置在另一个class="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>

- Rani Thakkar

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>

- anurag

Answer 3

我只是从你的第一个输入标签中删除了 form-control，然后用 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>

- Horken