Возникли проблемы при расширении Bootstrap Navigator по моему <header> - PullRequest
Новая
       9

Возникли проблемы при расширении Bootstrap Navigator по моему <header>

0 голосов
/ 09 января 2019

Заголовок на моем сайте не полностью расширяется по горизонтали в моем разделе заголовка моего сайта.

Например, в правой части моего заголовка открыто пустое пространство, встроенное в раздел заголовка.

У меня есть 

<!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%. Горизонтальная прокрутка

1 Ответ

0 голосов
/ 09 января 2019

Причина в том, что вы используете 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...