Bootstrap内联表单在低宽度上没有响应？

Question

我使用bootstrap完成了内联表单。如果我尝试最小化或缩小浏览器的宽度，它无法响应。不确定，但引导带内联形式不响应？控件彼此混淆。我不能改变页面的设计。请指导我如何纠正这个问题，而不是以干净清晰的方式混乱和反应。

确定后以全宽形式：

最小化浏览器或屏幕宽度减少时的表单：

这是我的标记：

<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>