Question

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

我想出的是这样的。我要么可以让下拉列表占用正确的空间，但是文本在下面，或者在下拉列表旁边显示文本，一切都会变得模糊。

我不确定我做错了什么。这是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>

非常感谢所有帮助！

Answer 1

这是一个简化的小提琴：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>

Answer 2

布局混乱，因为<?php $conn = mysqli_connect(HOST, USER, PASS, DATABASE); $select_cursos = $conn->prepare(" SELECT cursoID, nombreCurso, estadoCurso FROM cursos WHERE estadoCurso = ? ORDER BY nombreCurso ASC "); $select_cursos->bind_param('s', $nombreCurso); $nombreCurso = 'abierto'; // This you can get from a $_POST too if (!$select_cursos->execute()) { // ERROR echo('Error'); } else { // OK $select_cursos_result = $select_cursos->get_result(); $select_cursos_count = select_cursos_result->num_rows; echo('Found: '.$select_cursos_count); if ($select_cursos_count > 0) { while ($data = $select_cursos_result->fetch_assoc()) { echo ($data['nombreCurso'].'<br>'); } } else { echo ('No data!!'); } } ?>类处理不当。试试这个，

form-group

谢谢！

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

2 个答案: