时间戳

首页 > 解决方案 > 导航栏不会一直走到边缘

html - 导航栏不会一直走到边缘

问题描述

我刚开始学习布局。我正在使用引导程序。和一开始一样，我遇到了问题，我已经 2 天没能解决。

在此处输入图像描述

我有两个问题：

  1. 为什么导航栏不会一直走到边缘。如何解决？压痕没有产生预期的结果。

  2. 为什么按钮不起作用？我按预期做了一切。我的意思是：

这是完整的代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap.min.css">
    <title>Document</title>
    <style>
        div {
            border: darkgreen 1px solid;
        }



        .li-center {
            position: absolute;
            left: 50%;
            transform: translatex(-50%);
        }
   

        nav .navbar-nav li a:hover {
            color: pink !important;
        }

        nav .navbar-nav li a {
            color: lime !important;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="container" style="margin:0px;">
            <nav class="navbar navbar-expand-md navbar-dark" style="background-color:darkblue;margin:0px;">
                <div style="margin:0px;">
                    <a class="navbar-brand" href="#">
                        <img src="img/bug.png" height="30" alt="bug logo">
                    </a>
                    <span class="mr-auto" style="font-weight: bold;font-size:large;color:white">Instruction</span>
                </div>
                <button class="navbar-toggler" data-toggle="collapse" data-target="#myMenu">
                    <span class="navbar-toggler-icon" style="color:lime"></span>
                </button>
               
                <div class="collapse navbar-collapse" id="myMenu">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Products</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Lessons</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Help</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>


        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, dolor.
            </div>

            <div class="col-sm-12 col-md-6 col-lg-9">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quo dolor odit magnam explicabo
                delectus enim reiciendis quis cum? Ab, officia accusantium totam vel mollitia nemo repellat laudantium
                animi, illum modi consequatur, ipsa aperiam blanditiis maiores fuga alias dicta enim dolores deserunt
                quidem suscipit fugit! Praesentium voluptatibus distinctio, laudantium adipisci quisquam perspiciatis
                consequuntur tempore, dignissimos error blanditiis aliquid nesciunt repellendus? Rerum ea molestias at
                repellendus illum veritatis consectetur quas possimus aperiam, itaque explicabo ducimus harum ullam unde
                placeat sunt nam laborum minima accusantium, provident hic non sed. Magnam doloribus aliquam, odit
                adipisci consequatur eligendi perspiciatis perferendis, quisquam voluptatum eaque ducimus?
            </div>
        </div>

    </div>


</body>

</html>

标签： htmlbootstrap-4

解决方案

尝试导航栏：

.container {
        margin: 0 !important;
        padding: 0 !important;
      }

推荐阅读