Bootstrap内联表单在低宽度上不响应？ [英] Bootstrap inline form is not responsive on low width?

问题描述

我使用bootstrap做了一个内联表单。它不工作响应，如果我尝试最小化或缩小浏览器的宽度。不确定，但是引导带内联表单不响应？控件刚刚相互混乱。我不能改变页面的设计。请指导我如何纠正这个工作没有混乱和响应在一个干净和清晰的方式。

I have done a inline form using bootstrap. It don't work responsive if I try to minimize or shrink the width of browser. Not sure but are boot strap inline forms not responsive ? Controls just jumbled with each other. I cant change design of page. Kindly guide how I can correct this to work not jumbled and responsive in a clean and clear way.

确定时以全角格式显示：

Form in full width when it is ok:

在最小化浏览器或缩小屏幕宽度时生成表单：

Form in minimize browser or when screen width is reduced:

这是我的标记：

<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 网格选项：

You may wish to use the class prefix .col-xs- instead of 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>

这篇关于Bootstrap内联表单在低宽度上不响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！