В моем HTML-коде я пытаюсь создать пару кнопок внутри модальных. Я использую Bootstrap для этого. В части нижнего колонтитула я пытаюсь равномерно разделить эти кнопки по ширине модального (или модального нижнего колонтитула).
Я мог бы использовать столбцы Bootstrap для достижения этой цели, но заполнение (между элементами, содержащими класс .col-*
) может быть слишком большим для этой цели. Я мог бы назначить ширину, но это не делит элементы равномерно между количеством доступного пространства.
Это то, что я пробовал до сих пор:
$(document).ready(function() {
$(".modal").modal();
});
.foo {
/* Hardcoded width, how could I make it that when adding buttons, width is split among amount of buttons? */
float: left;
width: 30%;
margin: 0 5px;
}
.bar {
/* Not working to center the buttons: */
margin: 0 auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>…</p>
</div>
<div class="modal-footer">
<!-- Content with three evenly spread/divided buttons on a single line -->
<div class="bar">
<div class="foo">
<button type="button" class="btn btn-default btn-block">Button 1</button>
</div>
<div class="foo">
<button type="button" class="btn btn-default btn-block">Button 2</button>
</div>
<div class="foo">
<button type="button" class="btn btn-default btn-block">Button 3</button>
</div>
</div>
<!-- End of content -->
</div>
</div>
</div>
</div>
JSFiddle
Установка ширины в 30%, очевидно, не всегда приводит к равномерному разделению кнопок (например, если я добавлю еще одну кнопку, кнопки больше не будут равномерно распределяться). Также обратите внимание, что кнопки несколько наклонены влево. Я хотел бы, чтобы кнопки росли с размером модальной (a.k.a. отзывчивость). Каков наилучший способ разбить / разложить кнопки на одной строке в нижнем колонтитуле модала?