仅在小型设备上引导4网格未对齐

Question

使用Bootstrap 4，我试图在“按钮”旁边放一个复选框，它实际上是一个样式<a>标签。该复选框完全独立于按钮，这只是一个链接。我需要链接与复选框位于同一行。当页面宽度足以显示我的兄弟col-sm-6旁边最外面的col-sm-6时，一切都还可以。但是当你缩小窗口以使第一个col-sm-6出现在第二个col-sm-6的顶部（而不是左边）时，复选框会自动占据整行。

请参阅小提琴：https://jsfiddle.net/kfgodb9d/6/

缩小窗口以查看丑陋的布局并展开它以查看布局正确。

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <div id="verticalActionButtonGroup">
          <div class="row">
            <div class="col-sm-3">
              the checkbox goes here
            </div>
            <div class="col-sm-9">
              the button-styled link goes here
            </div>

      ... and so forth until you hit a sibling col-sm-6...

Answer 1

而不是col-sm-3使用col-3而不是col-sm-9使用col-9

请注意，在BS4中没有额外的小xs-*类

更新了小提琴here

Answer 2

代替 col-sm-6 仅使用 col-6 。在Bootsrap 4中， .col-sm - （小型设备 - 屏幕宽度> = 576px）。如果您想使用小于576px的宽度，请使用 .col - （超小设备 - 屏幕宽度<576px）。 col-6 在任何小型设备上都会排在一行。