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

Posted

技术标签:

【中文标题】如何在列之间添加空格[重复]【英文标题】：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-borderborder: 1px solid #000;

Stack Column image

【问题讨论】：

【参考方案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) 将代码制成片段以便我们查看结果，您的回答会有所帮助。

以上是关于如何在列之间添加空格[重复]的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Flexbox 中的两个 div 之间添加边距/空格 [重复]

如何在不使用 &nbsp 的情况下在行内元素之间添加空格 [重复]

如何使用flexbox进行两列布局，并在列中的项目之间使用相同的间距？ [重复]

如何在列和行之间的数据框中添加数据？

如何在 boxLayout 的两个按钮之间添加空格？

连接JavaScript句子时如何添加空格[重复]