Question

我想在每列之间添加一个间隙。如果我添加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>

enter image description here

编辑： 我想我忽略了一些东西... 效果很好：

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

但是如果我添加了最新的引导程序引用，它将无法正常工作。像这样：

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

Answer 1

保证金对于how the grid columns work是必不可少的。而是调整 padding 来影响列内容周围的空间...

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>

注意：列之间的间隔称为“装订线”。

Answer 2

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

https://codepen.io/justmemaarten/pen/mgYOGV

引导程序列间隙

2 个答案: