如何从引导容器行列 div 中删除空格答案

【问题标题】：how to remove whitespace from bootstrap container row col divs如何从引导容器行列 div 中删除空格
【发布时间】：2022-02-15 21:22:08
【问题描述】：

我正在使用引导程序，而我在 div 的左侧和右侧获得了可用空间的占据整个屏幕看起来只占 99%

我的代码：

#social-links {
  background-color : #242424;
  /* border        : .5px solid white; */
  text-align       : center;
  color            : white;
  margin-bottom    : -16px;
  margin-top       : -9px;
  margin-left      : 0px;
  }
#social-links a {
  color   : white;
  display : block;
  width   : 100%;
  padding : 2px;
  }
#social-links a:hover {
  transition       : 3s;
  background-color : white;
  color            : black;
  text-align       : center;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

<div class="container-fluid border p-0 m-0 no-border">

<div class="row p-0 m-0">
    <div class="col-4 p-0 mx-0 " id="social-links">
      <a href="#">Discord</a>
    </div>
    <div class="col-4 p-0 mx-0 " id="social-links">
      <a href="#">Instagram</a>
    </div>
    <div class="col-4 p-0 mx-0 " id="social-links">
      <a href="#">Twitter</a>
    </div>
  </div>
</div>

【问题讨论】：

从#social-links 中的标签中移除 2px 填充可能会有所帮助
移除 2px 内边距并不能解决问题
您在 HTML 代码中使用了 3 次相同的 ID。那是无效的 HTML。改用一个类。
你不能在引导程序中添加一个类，它必须有网格系统 Johannes 的类容器行列

标签： html css bootstrap-4

【解决方案1】：

明显的空白来自body 元素的默认边距。

另外 ~ 当一个 ID 对一个 HTML 元素是唯一的时，您使用了 3 次 ID。我将social-links 更改为class。

.social-links {
  background-color: #242424;
  /* border: .5px solid white; */
  text-align: center;
  color: white;
  margin-bottom: -16px;
  margin-top: -9px;
  margin-left: 0px;
}

.social-links a {
  color: white;
  display: block;
  width: 100%;
  margin: auto;
  padding: 2px;
}

.social-links a:hover {
  transition: 3s;
  background-color: white;
  color: black;
  text-align: center;
}

body {
  margin: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

<div class="container-fluid border p-0 m-0 no-border">
  <div class="row p-0 m-0">
    <div class="col-4 p-0 mx-0 social-links"><a href="#">Discord</a>
    </div>
    <div class="col-4 p-0 mx-0 social-links"><a href="#">Instagram</a>
    </div>
    <div class="col-4 p-0 mx-0 social-links"><a href="#">Twitter</a>
    </div>
  </div>
</div>

编辑 ~ 添加body { margin: 0;} 以删除body 元素上的默认边距。

【讨论】：

【解决方案2】：

我修复了问题在于类行边距和填充固定：

不和谐 Instagram 推特

【讨论】：

您能否提供更多关于您如何解决问题的详细信息？这样其他人也可以从您的调查中获益。