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

oxiaedzo  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(2)|浏览(133)

最近,我一直在学习如何设计导航栏的样式,这是我在网站开发培训中遇到的最奇怪的困难。在这段代码中,我几乎已经设计好了导航栏的样式,但问题是我在页面的右边得到了一个小白色。我不知道是哪个元素导致了这个问题。我尝试了所有的填充、边距、边框我在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

mec1mxoz

mec1mxoz1#

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

.row {
  margin: 0;
}

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

l7wslrjt

l7wslrjt2#

这可能对你有用

body {
    margin: 0;
}

相关问题