將一個按鈕輸入文本的旁邊 - 引導

Question

我想獲得一個下拉菜單在我輸入文本的左側，用「+」或「 - 」

例子。 [+] [輸入文字]

<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

你可以試試這個：

<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

我用input-group-addon類從引導和，但在該分區的<select>的偉大工程，但需要一點點的CSS來使它看起來很希望這工作

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>