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

【问题标题】：Why are my checkboxes misaligning on mobile?为什么我的复选框在移动设备上未对齐？
【发布时间】：2018-02-06 01:25:41
【问题描述】：

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

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

【问题讨论】：

来几张截图比较一下怎么样？
试试 col-xs-3; Bootstrap 网格系统有四个类：xs（手机）、sm（平板电脑）、md（台式机）和 lg（更大的台式机）
@Lab 实际上 col-xs 对 Bootstrap 4 无效。它只是 col。
@Lab 没问题 :)

标签： jquery twitter-bootstrap checkbox bootstrap-4

【解决方案1】：

看看the Bootstrap 4 Grid documentation;看起来您可能误用了 Grid 类。

.rows 应该是最顶层的元素，紧随其后的是.col* 元素。然后你可以把.form-groups 放在列里面；但它们不应包含完整的.row。

【讨论】：

【解决方案2】：

你可以使用form-group row（一个form-group-row组合）然后把内容放到里面的一个column里面。

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

这是一个工作代码sn-p（点击下面的“运行代码sn-p”按钮）：

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

【讨论】：