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

【问题标题】：set form width of inline form- responsive bootstrap设置内联表单的表单宽度 - 响应式引导程序
【发布时间】：2015-03-13 00:01:24
【问题描述】：

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

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

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

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

这是正确的方法吗？

我应该为此使用引导内联表单吗？

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

【问题讨论】：

标签： css twitter-bootstrap

【解决方案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">

【讨论】：

col-xs-* 适用于移动设备。
如果您应用了自定义边距、填充等，它可能会丢弃 12 个网格系统，您可能会失去 12 个网格系统之一来处理它
这就是为什么您将边距和填充应用于内部元素而不是列元素本身。

【解决方案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>

【讨论】：

用col-xs-12，三个元素之间没有间隙
这就是利润发挥作用的地方。