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>