我的
HTML看起来像这样:
<div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default fa fa-check-square" data-toggle-tooltip="tooltip" title="Toggle All" id="btnItemgridSelectAll" tabindex="5"> </button> <button type="button" id="BtnAddPayment" class="btn btn-default BtnColor fa fa-plus-square" data-toggle-tooltip="tooltip" title="Add New Row" tabindex="6"> </button> <button type="button" id="btnDelete" class="btn btn-default BtnColor fa fa-trash-o" data-toggle-tooltip="tooltip" title="Delete Selected Row" tabindex="7"> </button> </div> <label class="input-group-addon" >LongText1111111</label> <input class="form-control" type="text" /> <label class="input-group-addon" >LongText2222222</label> </div> </div> </div>
在小屏幕分辨率下查看布局时,输入组内的控件不会换行.
请帮我.
解决方法
好吧,根据你想看的时候它看起来很小,断点是什么,你可以添加css来改变它看起来的样子,这是一个例子.更改css的最佳方法是查看他们的CSS然后知道要改变什么.保持未经缩小的副本或访问回购并在线查看.
CSS
@media (max-width:500px) { .custom-input-group.input-group .input-group-btn { width:99%; display:block; margin-bottom:5px; } .custom-input-group.input-group .input-group-btn .btn { width: 34%; } .custom-input-group.input-group .input-group-btn .btn:last-child { border-radius:0 4px 4px 0 } .custom-input-group { display: block } .custom-input-group.input-group .input-group-addon { clear: both; display: block; width: 100%; border: 1px solid #ccc; border-radius: 4px; } .custom-input-group.input-group .input-group-addon + .form-control { border-radius: 4px; margin-bottom: 5px; } }
HTML
<div class="container"> <div class="input-group custom-input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default fa fa-check-square" data-toggle-tooltip="tooltip" title="Toggle All" id="btnItemgridSelectAll" tabindex="5"> 1 </button> <button type="button" id="BtnAddPayment" class="btn btn-default BtnColor fa fa-plus-square" data-toggle-tooltip="tooltip" title="Add New Row" tabindex="6">2 </button> <button type="button" id="btnDelete" class="btn btn-default BtnColor fa fa-trash-o" data-toggle-tooltip="tooltip" title="Delete Selected Row" tabindex="7"> 3 </button> </div> <label class="input-group-addon" >LongText1111111</label> <input class="form-control" type="text" /> <label class="input-group-addon" >LongText2222222</label> </div> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。