Question

我喜欢Bootstrap 4中复选框和单选按钮的新设置，但是我希望能够根据屏幕尺寸从“堆栈”变为“内联”。他们为很多东西添加了尺寸标签，但是我找不到新的form-check和form-check-inline的方法。

理想情况下，我想做的是

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-12">
    <div class="form-group row">
      <label class="col-sm-3 col-form-label text-left">Date Range:</label>
      <div class="col-sm-9">
        <div class="form-check form-check-inline">
          <input type="radio" class="form-check-input" id="rdo30" ng-model="vm.dateRange" value="30" ng-selected="true" />
          <label for="rdo30" class="form-check-label">Last 30 Days</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="radio" class="form-check-input" id="rdo90" ng-model="vm.dateRange" value="90" />
          <label for="rdo90" class="form-check-label">Last 90 Days</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="radio" class="form-check-input" id="rdoYTD" ng-model="vm.dateRange" value="YTD" />
          <label for="rdoYTD" class="form-check-label">YTD</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="radio" class="form-check-input" id="rdoRange" ng-model="vm.dateRange" value="range" />
          <label for="rdoRange" class="form-check-label">Manual Date Range</label>
        </div>
      </div>
    </div>
  </div>
</div>

但是我可以将“ form-check-inline”更改为“ form-check-inline-md”或类似的样式-因此单选按钮将堆叠直到“ MD”大小，然后它们将内联。

您是否知道在Bootstrap 4中是本机执行的操作，还是不可能？

（不，这不是一个“设计”问题-这是一个代码问题。我想知道哪种代码可以帮助我实现目标。）

Answer 1

Bootstrap提供了 Grid System ，您可以在其中通过添加类来实现响应。检查link

操作方法：引导程序4个内联复选框-在屏幕尺寸更改时更改为堆栈

1 个答案: