在我的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>
将宽度设置为30%显然并不总是使按钮均匀分开(例如,如果我添加另一个按钮,则按钮不再均匀分布)。另请注意,按钮略微向左倾斜。我希望按钮随着模态(a.k.a.响应性)的大小而增长。在Modal的页脚中将按钮拆分/分散在一条线上的最佳方法是什么?
在条形div上添加display: flex
并在子div上添加flex: 1 0 auto;
那时你不需要30%的宽度。
.bar {
display: flex;
}
.bar > div {
flex: 1 0 auto;
}
$(document).ready(function() {
$(".modal").modal();
});
.foo {
margin: 0 5px;
}
.bar {
display: flex;
}
.bar>div {
flex: 1 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
您可以使用此引导程序:
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">Button 1</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">Button 2</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">Button 3</button>
</div>
</div>
我想添加另一个按钮,你可以做到。
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">Button 1</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">Button 2</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">Button 3</button>
</div>
<div class="btn-group" role="group" aria-label="Fourth group">
<button type="button" class="btn btn-secondary">Button 4</button>
</div>
</div>