Setzen Sie auf eine Schaltfläche neben einem Eingabetext - Bootstrap

Question

Ich versuche, ein Drop-Down-Menü auf der linken Seite meines Eingabetext zu bekommen, mit einem ‚+‘ oder ‚-‘

Beispiel. [+] [Eingabetext]

<div class="form-group btm_border"> 
    <label class="col-sm-4 control-label" for="first_name"><?php echo translate('modify_amount') ?></label> 
    <div class="col-sm-6"> 
     <div class="form-group" style="display:inline-block; float:none;"> 
        <select class="selectpicker"> 
         <option value="1">+</option> 
         <option value="2">-</option> 
        </select> 
    <input type="text" name="rebate_amount" id="rebate_amount" value="0" placeholder="0" class="form-control required"> 
        </div> 
       </div> 
    </div> 

Answer 1

Sie können dies versuchen:

<div class="form-group btm_border"> 
 
    <div class="row"> 
 
     <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> 
 
      <label class="control-label" for="first_name"><?php echo translate('modify_amount') ?></label> 
 
     </div> 
 

 
     <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"> 
 
      <select class="selectpicker form-control"> 
 
       <option value="1">+</option> 
 
       <option value="2">-</option> 
 
      </select> 
 
     </div> 
 
     <div class="col-lg-4 col-md-4 col-sm-8 col-xs-8"> 
 
      <input style="float: left" type="text" name="rebate_amount" id="rebate_amount" value="0" placeholder="0" class="form-control required"> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Ich benutzte die input-group-addon Klasse von Bootstrap und aber die <select> in diesem div funktioniert gut, aber benötigt ein wenig css, um es schön aussehen zu lassen, hoffentlich funktioniert das

select::-ms-expand 
 
      { 
 
       display: none; 
 
      } 
 
      select 
 
      { 
 
       -webkit-appearance: none; 
 
       -moz-appearance: none;  
 
       appearance: none; 
 
       border: none; 
 
       background: none; 
 
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="form-group btm_border"> 
 
    <label class="col-sm-4 control-label" for="first_name"><?php echo translate('modify_amount') ?></label> 
 
       <div class="input-group"> 
 
        <div class="input-group-addon">    
 
         <select> 
 
          <option value="1">+</option> 
 
          <option value="2">-</option> 
 
         </select> 
 
        </div> 
 
        <input type="text" name="rebate_amount" id="rebate_amount" value="0" placeholder="0" class="form-control required"> 
 
       </div> 
 
      </div>