我已经使用 bootstrap 完成了一个内联表单。如果我尝试最小化或缩小浏览器的宽度,它不会响应。不确定,但是 Bootstrap 带内联表单是否没有响应?控件只是相互混淆。我不能改变页面的设计。请指导我如何更正此问题,以便以干净清晰的方式工作而不是困惑和响应。
当没问题时以全 Angular 形式形成:
最小化浏览器或屏幕宽度减小时的表单:
这是我的标记:
<div class="row">
<div class="col-md-4">
<div class="col-md-3">
Round:
</div>
<div class="col-md-1">
<input class="form-control" type="text" id="roundNumber" value="<%= Model.Round %>" />
</div>
</div>
<div class="col-md-4">
<input type="button" class="btn btn-green" onclick="displayRound()" value="Display">
</div>
<div class="col-md-4">
<input type="button" class="btn btn-green" onclick="exportHistory()" value="Export history"></div>
</div>
最佳答案
您可能希望使用类前缀 .col-xs- 而不是 md Grid Options :
<div class="row">
<div class="col-xs-4">
<div class="col-xs-3">Round:</div>
<div class="col-xs-1">
<input class="form-control" type="text" id="roundNumber" value="<%= Model.Round %>">
</div>
</div>
<div class="col-xs-4">
<input type="button" class="btn btn-green" onclick="displayRound()" value="Display">
</div>
<div class="col-xs-4">
<input type="button" class="btn btn-green" onclick="exportHistory()" value="Export history">
</div>
</div>
关于html - Bootstrap 内联表单对低宽度没有响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22056293/