css - Bootstrap 中的响应式文本框用于超小尺寸(col-xs)不起作用

Question

你好 friend ，文本框在大、中、小尺寸时工作正常，但当我在超小尺寸设备中使用文本框时，它会被剪切。以下是我的文本字段的代码。请帮我解决这个问题，我们非常感谢您的帮助。提前致谢

<div class="form-group">

                        <div class="col-sm-6 col-lg-6 col-md-6 col-xs-12">
                            <label for="inputEmail" class="col-sm-6 col-lg-3 col-xs-12 col-md-3 control-label" style="">Anything</label>
                            <div class="col-sm-12 col-lg-9 col-xs-12 col-md-9">
                               <div class="input-group">
                                  <div class="input-group-addon">$</div>
                                  <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                                </div>
                            </div>
                        </div>  
                        <div class="col-sm-12 col-lg-6 col-md-6 col-xs-12">
                            <div class="col-lg-4 col-md-4 col-sm-6">
                             <label for="inputEmail" class="control-label" style="">per</label> 
                             <div class="btn-group btn-group-xs" role="group" aria-label="...">
                                <button type="button" class="btn btn-default tax_percentage active" > month </button>
                                <button type="button" class="btn btn-default tax_flat"> year </button>
                                <input type='hidden' id='month_year_button' name='month_year_button' />
                             </div>
                            </div> 
                            <div class="col-lg-8 col-md-8 col-sm-6">
                             <p>How much will spend on office rent?</p>
                            </div>
                        </div>  
                    </div>

Answer 1

您应该减小 xs 的列的大小，以便它们都适合一行。

<div class="col-sm-6 col-lg-6 col-md-6 col-xs-8">
<label for="inputEmail" class="col-sm-6 col-lg-3 col-xs-4 col-md-3 control-label" style="">Anything</label>
<div class="col-sm-12 col-lg-9 col-xs-8 col-md-9 input-sm">
<label class="sr-only" for="exampleInputAmount"></label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>

希望这对你有用。