Инструкция: Bootstrap 4 встроенных флажка — изменить на stack при изменении размера экрана

#javascript #html #css #bootstrap-4

#javascript #HTML #css #bootstrap-4

Вопрос:

Мне нравится новая настройка флажков и переключателей в Bootstrap 4, но я хотел бы иметь возможность переходить от «stack» к «inline» в зависимости от размера экрана. Они добавили теги размера для стольких вещей, но я не могу найти способ сделать это с помощью новых 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 изначально, или это невозможно?

(нет, это не вопрос «дизайна» — это вопрос кода. Я хочу знать, какой код поможет мне достичь цели.)

Ответ №1:

Bootstrap предоставляет сеточную систему, в которой вы можете добиться отзывчивости путем добавления классов. Проверьте ссылку

Комментарии:

1. Это абсолютно ничего не делает для превращения встроенных флажков в их стопку, если только ваше предложение не заключается в том, чтобы поместить каждый флажок в столбец, а затем указать им складываться в разных разрешениях? Это очень обходной способ сделать дело, и не очень практичный. И перенос их в столбцы сводит на нет цель использования встроенных в Bootstrap классов form-check-inline.