引导按钮调整大小

Question

我有一个简单的表格：由于某种原因，“生成密码”按钮在我的 iphone 上没有调整大小，并且占用了两倍的大小（它占用 8 列）。有人可以帮忙吗？

<form action="#" class="form-horizontal">

                    <fieldset>


                        <div class="form-group">


                        </div>  



                        <div class="form-group">
                                <label class="control-label col-xs-4 col-sm-4 col-md-4" for="passcodeID" > Amount: </label>

                                <div class="col-xs-4 col-sm-4 col-md-4">
                                <input type="text" class="form-control" id="passcodeID" autofocus/>
                                </div>

                        </div>  



                        <div class="form-group">


                                <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4">
                                <button class="btn btn-primary" data-toggle="modal" data-target="#generatePasscode"> Generate Passcode </button>
                                </div>

                        </div>  


                    </fieldset>
                    </form>

Answer 1

为此，您必须减小移动设备按钮的字体大小和填充。 @media 屏幕分辨率。对于移动设备，它不会将列更改为 8。按钮溢出。这是由于按钮内没有大量文本。您可以通过为按钮上方的 div 提供溢出：隐藏样式来验证它。

所以解决方法是 对于移动分辨率，为按钮添加一个额外的类并提供@media screen css 并减少字体大小和按钮的填充，以解决您面临问题的小屏幕分辨率。