bootstrap3 表单的文本与下拉列表重叠答案

【问题标题】：bootstrap3 form has text overlapping with dropdownbootstrap3 表单的文本与下拉列表重叠
【发布时间】：2016-07-25 17:01:34
【问题描述】：

我正在尝试创建一个如下所示的表单：

我想出的东西看起来像这样。我要么可以让下拉菜单占用正确的空间，然后文本在下面，要么让文本在下拉菜单旁边，然后一切都变得模糊。

我不确定我做错了什么。这是html：

<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}">
<div class="form-group">
    <label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label>
    <div class="col-sm-8">
        <div class="form-inline">
            <div class="form-group">
                <select class="liveSyncSchedule form-control"></select>
            </div>
            <div class="form-group">{{t "templates.scheduler.seconds"}}</div>
        </div>
    </div>
    <div class="col-sm-offset-3 col-sm-8">
        <div class="checkbox">
            <label>
                <input type="checkbox" />{{t "templates.scheduler.enabled"}}
            </label>
        </div>
    </div>
    <div class="col-sm-offset-3 col-sm-8">
        <div class="checkbox">
            <label>
                <input type="checkbox" />{{t "templates.scheduler.persisted"}}
            </label>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label>
    <div class="col-sm-8">
        <select class="misfirePolicy form-control">
            <option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option>
            <option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option>
        </select>
    </div>
</div>

非常感谢所有帮助！

【问题讨论】：

标签： html twitter-bootstrap-3

【解决方案1】：

布局混乱，因为form-group 类没有正确处理。试试这个，

<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}">
    <div class="form-group">
        <label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label>
        <div class="col-sm-8">
            <div class="form-inline">
                <select class="liveSyncSchedule form-control"></select>
                <span>{{t "templates.scheduler.seconds"}}</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-8">
            <div class="checkbox">
                <label>
                    <input type="checkbox" />{{t "templates.scheduler.enabled"}}
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-8">
            <div class="checkbox">
                <label>
                    <input type="checkbox" />{{t "templates.scheduler.persisted"}}
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label>
        <div class="col-sm-8">
            <select class="misfirePolicy form-control">
                <option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option>
                <option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option>
            </select>
        </div>
    </div>
</form>

谢谢！

【讨论】：

这两种反应都不是完美的，但我确实在帮助下弄清楚了。谢谢大家！

【解决方案2】：

这是一个简化的小提琴：https://jsfiddle.net/mz1xgr38/

<form class="form-horizontal">

    <div class="form-group">
        <label class="col-sm-3 control-label">Fire every</label>
        <div class="col-sm-9">

            <div class="row">

                <div class="col-md-6">
                    <select class="form-control">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                </div>

                <div class="col-md-6">
                    Seconds
                </div>

            </div>

        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9 ">
            <div class="checkbox">
                <label>
                    <input type="checkbox" />Enabled
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" />Persisted
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label">Misfire policy</label>
        <div class="col-sm-9">
            <select class="form-control">
                <option>Option 1</option>
                <option>Option 2</option>
            </select>
        </div>
    </div>

</form>

【讨论】：