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

我使用了bootstrap中的input-group-addon类，但是该div中的<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>

在输入文本旁边放一个按钮 - Bootstrap

2 个答案: