Question

我有几个带有以下标记的复选框：

<form>
    <div class="form-group">
        <div class="row">
            <div class="form-check">
                <input type="checkbox" class="form-check-input col-md-3" id="updates">
                <label class="form-check-label col-md-9 text-left" for="updates"><small>Want to receive updates.</small></label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="form-check">
                <input type="checkbox" class="form-check-input col-md-3" id="customer">
                <label class="form-check-label col-md-9 text-left" for="customer"><small>I want to subscribe</small></label>
            </div>
        </div>
    </div>
</form>

他们工作得很好。唯一的问题是，虽然在桌面上他们看起来很好，从平板电脑开始，然后他们开始向领域的中间推进，这样当他们在移动设备上看到时，复选框是死中心（在文本下）。仍然可点击但不知道为什么会这样。

我正在使用bootstrap 4和jquery 3.3.1。

Answer 1

看看the Bootstrap 4 Grid documentation;看起来你可能在滥用Grid类。

.row应该是最顶层的元素，后面跟着.col*元素。然后你可以将.form-group放在列中;但它们不应包含完整的.row。

Answer 2

您可以使用form-group row（表单 - 组 - 行组合），然后将内容放入内部的列中。

在以下示例中，类col-sm-10 offset-1表示它占据10个单位且偏移量为1的列。

这是一个有效的代码段（点击下面的＆＃34;运行代码段＆＃34;按钮）：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<form class="mt-4">
    <div class="form-group row">
        <div class="col-sm-10 offset-1">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="updates">
                <label class="form-check-label" for="updates">
                    <small>Want to receive updates.</small>
                </label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-1">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="customer">
                <label class="form-check-label" for="customer">
                    <small>I want to subscribe</small>
                </label>
            </div>
        </div>
    </div>
</form>

＆＃13;

为什么我的复选框在移动设备上不对齐？

2 个答案: