设置内联形式响应式引导程序的表单宽度

Question

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

第一个（商店），第二个（地点）和第三个（搜索）表单元素应该占总水平行的50％，30％和20％（6,4和2个bootstrap col单位）。

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

<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-xs-12＆amp; amp;来调整小屏幕。将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>

Answer 2

您必须为每个指定一个小的（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">