设置内联表单的表单宽度 - 响应 bootstrap

Question

我试图在一个水平行中嵌入三种不同的形式。

第一个（商店）、第二个（地区）和第三个（搜索）表单元素应占总水平行的 50%、30% 和 20%（6,4 和 2 bootstrap 列单位） .

在移动视图中，每三个表单元素都应在单独的行中进行调整。我试过以下：

<div class="row search-form-wizard">
    <form role="form" class="">
        <div class="form-group form-group-lg">
            <div class="col-md-6">
                <label class="sr-only" for="select2_sample6"></label>
                <input type="hidden" id="select2_sample6" class="form-control select2 input-lg"  >
            </div>
        </div>
        <div class="form-group form-group-lg">
            <div class="col-md-4">
                <label class="sr-only" for="selectextra_sample6"></label>
                <input type="hidden" id="selectextra_sample6" class="form-control select2 input-lg" >
            </div>
        </div>
        <div class="col-md-2">
            <button type="button" class="btn green btn-lg btn-block"><i class="fa fa-search"></i> Search</button>
        </div>
    </form>
</div>

这是正确的做法吗？

为此，我应该使用 bootstrap 内联表单吗？

我试过使用内联表单，但是很难设置每个表单元素的宽度。

Answer 1

您必须为每个指定一个小的 (col-sm-*) 宽度。 像另一个答案一样编辑 col-xs 用于超小屏幕。

<div class="col-md-6 col-sm-12">

<div class="col-md-4 col-sm-12">

<div class="col-md-2 col-sm-12">

Answer 2

你是对的，你只需要使用 col-xs-12 调整小屏幕并将 md 更改为 sm..xs 是移动的...

<div class="row search-form-wizard">
    <form role="form" class="">
        <div class="form-group form-group-lg">
            <div class="col-sm-6 col-xs-12">
                <label class="sr-only" for="select2_sample6"></label>
                <input type="hidden" id="select2_sample6" class="form-control select2 input-lg"  >
            </div>
        </div>
        <div class="form-group form-group-lg">
            <div class="col-sm-4 col-xs-12">
                <label class="sr-only" for="selectextra_sample6"></label>
                <input type="hidden" id="selectextra_sample6" class="form-control select2 input-lg" >
            </div>
        </div>
        <div class="col-sm-2 col-xs-12">
            <button type="button" class="btn green btn-lg btn-block"><i class="fa fa-search"></i> Search</button>
        </div>
     </form>
</div>

设置内联表单的表单宽度 - 响应 bootstrap

set form width of inline form- responsive bootstrap

css

twitter-bootstrap