我想在每列之间添加间隙。如果我添加一个margin属性，则列不适合一行。我怎么能在每一行都有4个柱子？
<style>
.test {
border: 5px solid red;
}
</style>
<div class="container-fluid test">
<div class="row">
<div class="col-md-3 test m-2">
Hello
</div>
<div class="col-md-3 test m-2">
Hello
</div>
<div class="col-md-3 test m-2">
Hello
</div>
<div class="col-md-3 test m-2">
Hello
</div>
</div>
</div>
编辑：我想我忽略了一些......这很好用：
.gap {
margin: 10px;
border: 1px solid black;
width: fit-content;
padding: 10px;
}
.row {
display: flex;
border: 1px solid black;
}<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<!-- Basic Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styletest.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 gap">
columns 1
</div>
<div class="col-sm-3 gap">
columns 2
</div>
<div class="col-sm-3 gap">
columns 3
</div>
<div class="col-sm-3 gap">
columns 4
</div>
<div class="col-sm-3 gap">
columns 5
</div>
</div>
</div>
</body>
</html>但如果我添加最新的bootstrap引用它不起作用。像这样：
.gap {
margin: 10px;
border: 1px solid black;
width: fit-content;
padding: 10px;
}
.row {
display: flex;
border: 1px solid black;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<!-- Basic Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styletest.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 gap">
columns 1
</div>
<div class="col-sm-3 gap">
columns 2
</div>
<div class="col-sm-3 gap">
columns 3
</div>
<div class="col-sm-3 gap">
columns 4
</div>
<div class="col-sm-3 gap">
columns 5
</div>
</div>
</div>
</body>
</html>
.background {
background: blue;
}<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-12 background">
<h1>test1</h1>
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 background">
<h1>test2</h1>
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 background">
<h1>test3</h1>
</div>
</div>
</div>
</div>边距对how the grid columns work至关重要。而是调整填充以实现列内容周围的空间...
https://www.codeply.com/go/YySEuVELp6
<div class="container-fluid test">
<div class="row">
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
</div>
</div>
注意：列之间的空格称为“装订线”。