正确使用 Bootstrap 的对齐内容之间和堆栈到水平列

我正在设计一个响应表单。我的表单有1个标签、1个输入字段和5个按钮。

我的按钮和输入字段都在第8栏下。

我希望我的按钮以这样的方式放置：

它应该开始放置在输入字段的下方和开头。(想象一列8下的2行(
两个按钮之间的间距相等。
在小屏幕上，按钮将显示为堆栈。

以下是我想要的屏幕截图：

对于正常屏幕

当小屏幕-它应该堆叠

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-dark col-6" style="margin-top: 2rem;">
<form>
<div class="form-group row">
<label for="id" class="col-4 col-form-label" style="color: white;">id</label>
<div class="col-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="offset-4 form-group row justify-content-between">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
<div class="offset-4 form-group row">
<div class="col-sm">
<button type="button" class="btn btn-primary">A</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-warning">B</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary">C</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">D</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-info">E</button>
</div>
</div>
<div class="offset-4 form-group row justify-content-between">
<div class="col-sm">
<button type="button" class="btn btn-primary">A</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-warning">B</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary">C</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">D</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</form>
</div>
</body>
</html>

我试过3次放置5个按钮。

仅限row和justify-content-between
则-row和col
最后-row、col和justify-content-between

但它们中的每一个要么跨越输入字段宽度(第一张屏幕截图(，要么与输入字段宽度保持差距(第二张屏幕截图。

如何正确制作同时满足justify-content-between和正确堆叠[col在row]的5个按钮？

一个请求：我想有一个建议——不要过度使用边距和填充，因为这在所有屏幕尺寸下都应该很好。

您的标记有一些问题。为了避免将来出现这些情况，请阅读Bootstrap网格部分"如何工作"部分下的每个点(项目符号(。

以下是错误的分类：

并非所有.rows都是.container或.col的直接子代。因为.row具有负裕度，所以它需要具有水平"的父级；排水沟paddings以补偿负边距(或者您可以通过应用mx-0或no-gutters类来禁用槽(
您在为.cols设计的.row上应用了.offset-4。这一点很重要，因为将其应用于.row会使该行中的所有列错位
要使用.justify-content-between，您不一定需要另一个级别的.row+.cols。您只需要元素上的display: flex，它可以与d-flex类一起应用

作为一种替代解决方案，我将上一个.row示例更改为使用.btn-group，这对于这种类型的操作栏布局来说是一个稍微好一点的UI解决方案。自定义CSS主要用于在移动设备上将其切换为垂直(也可以通过应用.btn-group-vertical来实现，但它不支持响应变体(
看到它工作：

.custom-btn-group {
width: 100%;
}
@media(max-width: 767px) {
.custom-btn-group,
.vertical-mobile {
flex-direction: column;
}
.custom-btn-group:not(#_) .btn {
margin-left: 0;
}
.custom-btn-group:not(#_) .btn:first-child {
border-top-right-radius: .25rem;
border-bottom-left-radius: 0;
}
.custom-btn-group:not(#_) .btn:last-child {
border-bottom-left-radius: .25rem;
border-top-right-radius: 0;
}
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="container">
<div class="row">
<form class="bg-dark col-sm-6 py-3">
<div class="form-group row">
<label for="id" class="col-sm-3 col-md-4 col-form-label text-white">id</label>
<div class="col-sm-9 col-md-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="d-flex justify-content-between vertical-mobile">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="btn-group custom-btn-group">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
</form>
</div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-dark col-6" style="margin-top: 2rem;">
<form>
<div class="form-group row">
<label for="id" class="col-4 col-form-label" style="color: white;">id</label>
<div class="col-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="offset-4 col-8">
<div class="row justify-content-between" style="margin: 0%; padding: 0%;">
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-primary">A</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-success">B</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-warning">C</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-danger">D</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-primary">E</button>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>

我想提到一些对我有用的东西：

我必须为col-auto每次制作margin: 0%和padding: 0%，如果我不这样做，那么就会产生一个间隙，就像我的屏幕截图中一样
我必须把每个button放在col-auto中，然后把每个col-auto放在row中。最后，我制作了justify-content-between行，当然还有margin: 0%和padding: 0%行，用于消除不必要的间隙
最后，我用offset-4 col-8包裹了整个东西，row包裹了它

相关内容

最新更新

热门标签：