Question

我网站上的标头未在我网站的标头部分完全水平扩展。

例如-在我的标题部分中，导航栏的右侧有一个空白区域。

我有

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Bootstrap Test</title>
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        <!-- Custom CSS -->
        <link type="text/css" rel="stylesheet" href="./css/main.css" />

    <!--

        main.css file contents attached from above ^

        .right {
            padding-left: 850px;
        }

        .title {
            padding-left: 0px;
        }

        .main {
            width: 100%;
        }

        .vr {
            border-right: 1px solid;
        }

        /* .navbar {
            background-color: 'purple';
            width: 100%;
        } */

        header {
            width: 100%;
        }

    -->


    </head>
    <body>

    <!--  -------------------------------------------------------  -->
  
        <!-- This is the part I am struggling with...
             In here, the navigation bar within the header
             section is extending only about 90% across
             and not 100%. -->

        <header>
            <nav class="navbar navbar-dark bg-dark sticky-top">
                <h2 class="navbar-brand" href="#">Lockerroom Buzz</h2>
            </nav>
        </header>

    <!--  -------------------------------------------------------  -->

        <div class="row">

            <div class="col-md-2 vr">
                <h1>First Column</h1>
            </div>

            <div class="col-md-8 vr">
                <h1>Main Column</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisi eget sapien porttitor cursus in mattis augue. Donec aliquam consectetur quam. Sed posuere augue vitae aliquet egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu mi sed felis ultricies volutpat vitae vel magna. Nunc varius tristique dui, ut euismod ex euismod ac. Sed non accumsan dolor. Sed ut elit lobortis, suscipit eros a, finibus velit. In vulputate, massa nec egestas posuere, nunc orci euismod metus, sit amet fringilla sapien magna at purus. Pellentesque enim massa, pellentesque ut velit eget, scelerisque rutrum lorem. In tempus suscipit accumsan. Sed id aliquet arcu, ullamcorper luctus nunc. Duis id tortor finibus, viverra quam ut, consequat nisl. Etiam condimentum diam nec nulla placerat, non egestas tellus aliquam. Pellentesque suscipit, nisl a vulputate hendrerit, leo nunc varius sem, a interdum lectus tortor nec mauris.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisi eget sapien porttitor cursus in mattis augue. Donec aliquam consectetur quam. Sed posuere augue vitae aliquet egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu mi sed felis ultricies volutpat vitae vel magna. Nunc varius tristique dui, ut euismod ex euismod ac. Sed non accumsan dolor. Sed ut elit lobortis, suscipit eros a, finibus velit. In vulputate, massa nec egestas posuere, nunc orci euismod metus, sit amet fringilla sapien magna at purus. Pellentesque enim massa, pellentesque ut velit eget, scelerisque rutrum lorem. In tempus suscipit accumsan. Sed id aliquet arcu, ullamcorper luctus nunc. Duis id tortor finibus, viverra quam ut, consequat nisl. Etiam condimentum diam nec nulla placerat, non egestas tellus aliquam. Pellentesque suscipit, nisl a vulputate hendrerit, leo nunc varius sem, a interdum lectus tortor nec mauris.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisi eget sapien porttitor cursus in mattis augue. Donec aliquam consectetur quam. Sed posuere augue vitae aliquet egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu mi sed felis ultricies volutpat vitae vel magna. Nunc varius tristique dui, ut euismod ex euismod ac. Sed non accumsan dolor. Sed ut elit lobortis, suscipit eros a, finibus velit. In vulputate, massa nec egestas posuere, nunc orci euismod metus, sit amet fringilla sapien magna at purus. Pellentesque enim massa, pellentesque ut velit eget, scelerisque rutrum lorem. In tempus suscipit accumsan. Sed id aliquet arcu, ullamcorper luctus nunc. Duis id tortor finibus, viverra quam ut, consequat nisl. Etiam condimentum diam nec nulla placerat, non egestas tellus aliquam. Pellentesque suscipit, nisl a vulputate hendrerit, leo nunc varius sem, a interdum lectus tortor nec mauris.</p>
            </div>

            <div class="col-md-2">
                <h1>Last Column</h1>
            </div>

        </div>

        <footer>
            <nav class="navbar navbar-dark bg-dark fixed-bottom">Footer</nav>
        </footer>
    </body>
    </html>

预期：水平扩展100％。没有水平滚动

实际：水平扩展90％。水平滚动

Answer 1

原因是您使用的是class = "row"，而没有任何container导致margin-left:-15px; margin-right:-15px导致水平滚动
因此在<div class="row">内添加<div class="container">
我已经添加并附加了代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap Test</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <!-- Custom CSS -->
    <link type="text/css" rel="stylesheet" href="./css/main.css" />

<!--

    main.css file contents attached from above ^

    .right {
        padding-left: 850px;
    }

    .title {
        padding-left: 0px;
    }

    .main {
        width: 100%;
    }

    .vr {
        border-right: 1px solid;
    }

    /* .navbar {
        background-color: 'purple';
        width: 100%;
    } */

    header {
        width: 100%;
    }

-->


</head>
<body>

<!--  -------------------------------------------------------  -->

    <!-- This is the part I am struggling with...
         In here, the navigation bar within the header
         section is extending only about 90% across
         and not 100%. -->

    <header>
        <nav class="navbar navbar-dark bg-dark sticky-top">
            <h2 class="navbar-brand" href="#">Lockerroom Buzz</h2>
        </nav>
    </header>

<!--  -------------------------------------------------------  -->
<div class="container">
    <div class="row">

        <div class="col-md-2 vr">
            <h1>First Column</h1>
        </div>

        <div class="col-md-8 vr">
            <h1>Main Column</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisi eget sapien porttitor cursus in mattis augue. Donec aliquam consectetur quam. Sed posuere augue vitae aliquet egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu mi sed felis ultricies volutpat vitae vel magna. Nunc varius tristique dui, ut euismod ex euismod ac. Sed non accumsan dolor. Sed ut elit lobortis, suscipit eros a, finibus velit. In vulputate, massa nec egestas posuere, nunc orci euismod metus, sit amet fringilla sapien magna at purus. Pellentesque enim massa, pellentesque ut velit eget, scelerisque rutrum lorem. In tempus suscipit accumsan. Sed id aliquet arcu, ullamcorper luctus nunc. Duis id tortor finibus, viverra quam ut, consequat nisl. Etiam condimentum diam nec nulla placerat, non egestas tellus aliquam. Pellentesque suscipit, nisl a vulputate hendrerit, leo nunc varius sem, a interdum lectus tortor nec mauris.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisi eget sapien porttitor cursus in mattis augue. Donec aliquam consectetur quam. Sed posuere augue vitae aliquet egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu mi sed felis ultricies volutpat vitae vel magna. Nunc varius tristique dui, ut euismod ex euismod ac. Sed non accumsan dolor. Sed ut elit lobortis, suscipit eros a, finibus velit. In vulputate, massa nec egestas posuere, nunc orci euismod metus, sit amet fringilla sapien magna at purus. Pellentesque enim massa, pellentesque ut velit eget, scelerisque rutrum lorem. In tempus suscipit accumsan. Sed id aliquet arcu, ullamcorper luctus nunc. Duis id tortor finibus, viverra quam ut, consequat nisl. Etiam condimentum diam nec nulla placerat, non egestas tellus aliquam. Pellentesque suscipit, nisl a vulputate hendrerit, leo nunc varius sem, a interdum lectus tortor nec mauris.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisi eget sapien porttitor cursus in mattis augue. Donec aliquam consectetur quam. Sed posuere augue vitae aliquet egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu mi sed felis ultricies volutpat vitae vel magna. Nunc varius tristique dui, ut euismod ex euismod ac. Sed non accumsan dolor. Sed ut elit lobortis, suscipit eros a, finibus velit. In vulputate, massa nec egestas posuere, nunc orci euismod metus, sit amet fringilla sapien magna at purus. Pellentesque enim massa, pellentesque ut velit eget, scelerisque rutrum lorem. In tempus suscipit accumsan. Sed id aliquet arcu, ullamcorper luctus nunc. Duis id tortor finibus, viverra quam ut, consequat nisl. Etiam condimentum diam nec nulla placerat, non egestas tellus aliquam. Pellentesque suscipit, nisl a vulputate hendrerit, leo nunc varius sem, a interdum lectus tortor nec mauris.</p>
        </div>

        <div class="col-md-2">
            <h1>Last Column</h1>
        </div>

    </div>
  </div>

    <footer>
        <nav class="navbar navbar-dark bg-dark fixed-bottom">Footer</nav>
    </footer>
</body>
</html>

无法在<header>上扩展Bootstrap Navigator

1 个答案: