时间戳

首页 > 解决方案 > 在我的范围内扩展 Bootstrap Navigator 时遇到问题

html - 在我的范围内扩展 Bootstrap Navigator 时遇到问题

问题描述

我网站的标题没有在我网站的标题部分水平完全展开。

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

我有

<!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% 水平扩展。水平滚动

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

原因是你没有使用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>

推荐阅读