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