添加SVG导致Carousel消失及下方Div边距异常，如何修复？

问题解决总结 #

你碰到的这个怪事（添加头部邮件SVG后Carousel组件直接消失、下方Div边距也乱了），最终确认是VS Code编辑器搞的鬼，换个编辑器就解决了。这种情况大概率是编辑器在保存或格式化代码时偷偷加了隐藏的语法错误、不可见字符，或者和Bootstrap的DOM解析流程起了冲突，说起来挺离谱但确实偶尔会发生。

相关代码参考 #

以下是你提供的完整CSS和HTML代码：

CSS 样式

@charset "UTF-8";
body {
  overflow-x: hidden;
  background-color: rgb(246, 253, 255);
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #257d61;
}

h1 {
  font-size: 48px;
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
}

.clg-logo {
  margin-left: 10px;
  margin-right: 40px;
  height: inherit;
}

#header-bar {
  height: 40px;
  background-color: navy;
}

.header-nav-bar {
  height: inherit;
  margin-left: 10px;
  margin-right: 5px;
}

#carouselExampleIndicators {
  height: 300px;
}

.U-signup {
  padding: 50px;
  box-sizing: content-box;
  align-self: center;
}

.signup-form-content {
  padding: 50px;
}

.signupheader {
  background-color: blue;
  color: white;
}

.navbar {
  border-radius: 1S0px; /* 这里有个笔误：1S0应该是100，建议修正 */
}

.navbar li {
  float: left;
  list-style: none;
  margin: 13px 20px;
}

.navbar ul {
  overflow: auto;
}

.navbar li a {
  padding: 3px 3px;
  text-decoration: none;
  color: black;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.navbar li a:hover {
  color: blueviolet;
  text-decoration: underline;
}

.svg-1 {
  float: left;
}

.image-margin {
  margin-left: 0%;
}

.email-button {
  width: 24px;
  height: 24px;
}

HTML 结构

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!--top bar-->
<div class="top-header">
  <div id="header-bar">
    <div>
      <svg style="color: white; margin-top:10px;margin-left:50px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill svg-1" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z" fill="white"></path> </svg>
      <p style="color: white; display: flex;margin-top: 5px; margin-left: 5px;" class="svg-1">9999999999</p>
    </div>
    <div class="email-button">
      <svg style="color: white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#fff;opacity:0;}.cls-2{fill:#231f20;}</style></defs><title>email</title><g id="Layer_2" data-name="Layer 2"><g id="email"><g id="email-2" data-name="email"><rect class="cls-1" width="24" height="24"></rect><path class="cls-2" d="M19,4H5A3,3,0,0,0,2,7V17a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V7A3,3,0,0,0,19,4Zm-.67,2L12,10.75,5.67,6ZM19,18H5a1,1,0,0,1-1-1V7.25l7.4,5.55a1,1,0,0,0,.6.2,1,1,0,0,0,.6-.2L20,7.25V17A1,1,0,0,1,19,18Z" fill="white"></path></g></g></g></svg>

    </div>

  </div>
  <div class="row spacer-16 sids-60">
    <div class="col-lg-3 my-auto">
      <div class="float-left clg-logo">
        <nav class="navbar navbar-light bg-light">
          <a class="navbar-brand" href="#">
            <img src="images\logo.png" width="30" height="30" class="d-inline-block align-top image-margin" alt="">
            <b>CAMS</b>
          </a>
        </nav>
      </div>
    </div>

    <div class="col-lg-9 my-auto">
      <div class="float-right header-nav-bar">
        <nav class="navbar">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Public Notices</a></li>
            <li><a href="#">Admin</a></li>
            <li><a href="#">Users</a></li>
          </ul>
        </nav>
      </div>
    </div>

  </div>
</div>



<!--carousel slides-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://images.news18.com/ibnlive/uploads/2021/12/bts-3-1-164008807816x9.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://media.gq.com/photos/62aa49bd3ade2278af3f4f25/16:9/w_2560%2Cc_limit/GettyImages-1389467249.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </button>
</div>

额外小提醒 #

我注意到你CSS里的.navbar类有个明显笔误：border-radius: 1S0px; 这里的1S0应该是100，这个错误也可能导致一些样式异常，建议顺手修正一下。

内容的提问来源于stack exchange，提问作者Ronika