Bootstrap 4 两列未连续对齐答案

【问题标题】：Bootstrap 4 two columns not aligning in a rowBootstrap 4 两列未连续对齐
【发布时间】：2020-06-22 09:21:32
【问题描述】：

我使用引导程序 4 创建了一个登录表单。我在一行中有两个 col-md-6 列 1.记住我 2.忘记密码。但在移动设备中，忘记密码会从行中跳下来。我不明白为什么？任何想法？谢谢。

这里是截图：

<div class="row">
      <div class="col-md-6 text-left">
        <label class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" checked="" class="custom-control-input"><span class="custom-control-label">Remember me</span>
        </label>                  
      </div>
      <div class="col-md-6 text-right">
        <a href="#" class="text-primary">forgot password?</a>
      </div>
    </div>

【问题讨论】：

col-md-6 中的 md 适用于您的设备大小。尝试使用 col-xs-6 或 col-sm-6 查看文档中的突破点：getbootstrap.com/docs/4.0/layout/overview
@developer 我试过sm 没用
正如开发人员所说，xs、sm、md 和 lg 都在检查您的设备尺寸（例如台式机是 lg，平板电脑是 md），因此它们都必须单独使用。这是一个教程链接：scotch.io/tutorials/understanding-the-bootstrap-3-grid-system
@MiskaRantala 我正在使用引导程序 4
也因为这些显然是包装 - 没有什么可以阻止您使用其他技术来定位这些。即只使用 disiplay:inline-block 创建浮动 div - 不为这些部分使用引导程序？？

标签： html css forms bootstrap-4

【解决方案1】：

您将 col-md-6 用于平板设备（768px - 992px）

但默认情况下，您的 div 为 col-12 在移动设备中（0 - 576px）

这就是为什么您可以为移动设备添加自定义网格

例如：第一个 div：class="col-4" 第二个 div：class="col-8"

<div class="row">
      <div class="col-6 col-md-6 text-left">
        <label class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" checked="" class="custom-control-input"><span class="custom-control-label">Remember me</span>
        </label>                  
      </div>
      <div class="col-6 col-md-6 text-right">
        <a href="#" class="text-primary">forgot password?</a>
      </div>
</div>

【讨论】：

【解决方案2】：

如果您希望样式适用于较小的设备，则应删除 md。您通过指定 md 声明该样式仅适用于设备大于 768 像素的情况。

<div class="row">
      <div class="col-6 text-left">
        <label class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" checked="" class="custom-control-input"><span class="custom-control-label">Remember me</span>
        </label>                  
      </div>
      <div class="col-6 text-right">
        <a href="#" class="text-primary">forgot password?</a>
      </div>
    </div>

您可以阅读有关引导网格的更多信息：https://getbootstrap.com/docs/4.4/layout/grid/

【讨论】：

【解决方案3】：

如果您使用的是 v4 的引导程序（您的标签说您使用），那么您可以执行以下操作：

<div class="row">
 <div class="col">
   content 
 </div>
 <div class="col">
   content 
 </div>
</div>

Documentation for v4 grid

【讨论】：