html - Bootstrap 内联表单对低宽度没有响应？

Question

我已经使用 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>

Answer 1

您可能希望使用类前缀 .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>