最近，我一直在学习如何设计导航栏的样式，这是我在网站开发培训中遇到的最奇怪的困难。在这段代码中，我几乎已经设计好了导航栏的样式，但问题是我在页面的右边得到了一个小白色。我不知道是哪个元素导致了这个问题。我尝试了所有的填充、边距、边框我在Stackoverflow上看过其他的答案，大多数都建议在整个正文中添加“margin：0”。更奇怪的是，我已经在里面添加了。
我想补充的另一件事是，在为这个项目编码时，我确实多次遇到白色空白问题，但我使用了很多“肮脏的编码”（例如：在导航栏内的元素中添加边距或填充，使其看起来像是完美地粘在顶部和两侧，而实际上不是）。有人能解释一下我如何让导航栏完美地粘在顶部和两侧，同时还没有任何“脏代码”。提前感谢。
另外，由于我刚刚学习Web开发，我的代码可能看起来像一个完整的混乱，因为我不知道自己在哪里应用 Bootstrap ，在哪里我已经覆盖它。
HTML程式码：

<!DOCTYPE html>
<html lang="en">

    <!-- META TAGS -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

    <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

    <!-- FONT AWESOME -->
    <script src="https://kit.fontawesome.com/a2efd1781b.js" crossorigin="anonymous"></script>

    <!-- FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet"> 

    <link rel="stylesheet" href="css/style.css">
    <title>Stencil.io</title>
</head>
<body>

    <nav class="navbar navbar-collapse-md bg-dark">
        <h1>stencil.io</h1>

        <div class="row navbar-toggler">
            <ul>
                <li><a href="https://www.google.com">Google</a></li>
                <li><a href="https://www.quora.com">Quora</a></li>
                <li><a href="https://youtube.com">Youtube</a></li>
            </ul>
        </div>
    </nav>

    <header>
         <h1 class="title">All your social media at one place.</h1>

        <div class="icons container-fluid">
            <i class="snapchat fa-brands fa-square-snapchat fa-7x"></i>
            <i class=" instagram fa-brands fa-instagram fa-7x"></i>
            <i class=" twitter fa-brands fa-twitter fa-7x"></i>
        </div> 
    </header>
    
</body>
</html>

CSS程式码：

body{
    padding: 0;
    margin: 0;
     }

  nav{
    color: antiquewhite;
    position: sticky;
    right: 0;
  }

  h1{
    padding: 10px 20px;
  }

  ul{
    list-style: none;
  }

  li{
    padding: 10px;
    display: inline-block;
  }

  a{
    text-decoration: none;
    color: antiquewhite; 
  }

  a:hover{
    color: #FFD39A;
  }

  .title{
    font-family: "Rubik", sans-serif;
    width: 40%;
    margin: 150px 100px;
    float: left;
  }

  i{
    padding: 30px;
  }

  .icons{
    position: relative;
    top: 100px;

  }

添加参考图像：You Can see the small white gap in the right of the page

2条答案

按热度按时间

mec1mxoz1#

我打赌bootstrap的row类有时会有令人讨厌的margin-left: -15px和margin-right: -15px。
1-覆盖Bootstrap的行类：

.row {
  margin: 0;
}

2-将您的.row div Package 在.container-fluid div中（但您可能需要更改导航）
3-最好的方法：摆脱你的.row类（顺便说一句，不确定你在这里是否需要它）
全球性：你可能需要了解bootstrap结构，以便更好地理解它是如何工作的。在Bootstrap中，行应该总是（几乎）被 Package 在container或container-fluid中。缺少它通常会导致这种类型的水平滚动，这是由.row上的负边距引起的，正如本文开头所解释的。

赞(0）回复(0）举报 2022-12-08

l7wslrjt2#

这可能对你有用

body {
    margin: 0;
}

Bootstrap 如何消除导航栏周围的空格？

2条答案

相关问题

热门标签

最新问答