如何在列之间添加空格[重复]答案

【问题标题】：How to add space between column [duplicate]如何在列之间添加空格[重复]
【发布时间】：2021-10-22 10:28:26
【问题描述】：

我使用 Bootstrap 创建 3 列。添加边框后，这些列相互堆叠。我试图更改填充和边距，但没有奏效。如何在列之间添加空格？

HTML

<h3>Simple Text Box Color</h3>
<div class="row">
<div class="col-md-4 black-border">
<h3>Sample Text Box</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-md-4 black-border">
<h3>Sample Text Box</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-md-4 black-border">
<h3>Sample Text Box</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>

CSS

.black-border{border: 1px solid #000;}

Stack Column image

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您需要提及引导版本。从 bootstrap v5 开始，您可以使用 gutters 来实现您希望应用于列的效果。

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    .black-border {
      border: 1px solid #000;
    }
  </style>
</head>
<div class="container px-4">
  <div class="row g-2">
    <div class="col">
      <div class="p-3 border bg-light">
        <h3>Sample Text Box</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">
        <h3>Sample Text Box</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">
        <h3>Sample Text Box</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
</div>

</html>

【讨论】：

【解决方案2】：

尝试使用边距，我在您的代码上进行了测试，并且成功了。

 <style>

.black-border{ padding-left:30px;
margin-top: 30px;
margin-bottom: 30px;
margin-right: 30px;
margin-left: 30px;
border: 1px solid #000;}
</style>

【讨论】：

这样做会导致响应式移动视图中出现间距，为此必须再次单独编写 CSS。
确实如此，但它适用于他目前提供的示例，并且他从未说过它适用于移动应用程序。

【解决方案3】：

<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title> </head> <body>
<div class="container">
    <div class="row">
        <div class="col-sm-3 border m-2">
            <h3 class="text-center">First Box</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem, similique.</p>
        </div>
        <div class="col-sm-3 border m-2">
            <h3 class="text-center">Second Box</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt, eos!</p>
        </div>
        <div class="col-sm-3 border m-2">
            <h3 class="text-center">Third Box</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, laborum.</p>
        </div>
    </div>
</div> </body> </html>

【讨论】：

如果您 1) 解释您的代码，2) 将代码制成片段以便我们查看结果，您的回答会有所帮助。