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

Question

我有一个要求，我需要在下一个输入字段放置两个glyphicons，这样输入字段的宽度应该减小以适应两个图标。 但下面的代码将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

我只是删除形式的控制，形成你的第一个输入标签，并与山口取代-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>