如何在容器上添加边框 Div

Question

我正在尝试为包含 4 个 fa-icons 的 div 添加边框。由于我已将父级 div 设置为 Container，因此边框会自动在左右两侧水平占据较大的填充。我也试过嵌套 bootstrap 网格，但没有用。有人可以帮忙吗？

注意：四边的内边距不应大于 1px，div 应恰好位于页面中央。

HTML:

<div class="container" id="socialIcons">
        <div class="row">
            <div class="col-md-12">
              <a href="https://www.google.com">
                  <i class="fab fa-linkedin fa-3x "></i>
              </a>
              <a href="https://www.google.com" target="_blank">
                  <i class="fab fa-youtube fa-3x"></i>
              </a>
              <a href="https://www.google.com">
                  <i class="fab fa-instagram fa-3x"></i>
              </a>
              <a href="https://www.google.com">
                  <i class="fab fa-github fa-3x"></i>
              </a>
            </div> 
        </div>
 </div>

CSS:

#socialIcons {
    position: relative;
    text-align: center;
    margin-top: 300px !important;
    border: 1px solid white;
    }

更新： 应用 Jeff 的答案后，这更接近我的需要，但 GitHub 图标右侧仍然有自动填充。知道为什么吗？

Answer 1

如果您的图标应该居中对齐 - 您不需要将 div 元素与 container class 一起使用。只需添加一个带有自定义 class 的 div 包装器，然后在其上添加您的样式。

Answer 2

<div class="container" id="socialIcons">
    <div class="row">
        <div class="col-md-12" style="border: 1px solid white;">
          <a href="https://www.google.com">
              <i class="fab fa-linkedin fa-3x "></i>
          </a>
          <a href="https://www.google.com" target="_blank">
              <i class="fab fa-youtube fa-3x"></i>
          </a>
          <a href="https://www.google.com">
              <i class="fab fa-instagram fa-3x"></i>
          </a>
          <a href="https://www.google.com">
              <i class="fab fa-github fa-3x"></i>
          </a>
        </div> 
    </div>

希望以上代码对您有所帮助

Answer 3

你可以这样做（当你用我的 span 交换你的图标时，它应该在顶部和底部给你适当的填充）：

Codpen

而不是硬编码 text-align: center;，只需添加 class text-center 到 Bootstrap。另外，请注意我在行中添加了 justify-content-center。

    <div class="container text-center" id="socialIcons">
      <div class="row justify-content-center">
       <div class="border">
         <a href="https://www.google.com">
           <span>google</span>
        </a>
        <a href="https://www.google.com">
          <span>youtube</span>
        </a>
        <a href="https://www.google.com">
          <span>fb</span>
        </a>
        <a href="https://www.google.com">
          <span>twitter</span>
        </a>
       </div>
     </div>
    </div>

和CSS：

    #socialIcons {
      position: relative;
      margin-top: 300px !important;
    }

    .border {
     border: 1px solid black;
     padding: 1px;
    }

如何在容器上添加边框 Div

how to add a Border on a container Div

html

css

border

bootstrap-4

angular