Question

我正在尝试创建一个响应式bootstrap 4网站。当屏幕分辨率达到中等大小时，我需要在那里提供一个汉堡菜单，并产生与桌面完全不同的菜单（颜色相同，大小却相差很大）。我正在以1080p分辨率开发此网站，所以我认为这是xlarge的大小。我在整个过程中都考虑了响应式设计。我希望使用响应式设计来缩放所有内容，但是当我缩小google chrome时，我的“内容框”和其他区域不会保持缩放状态，这看起来与我想要的有所不同。我对此并不陌生，也许有人可以向我推荐一些Web开发人员工具？到目前为止，我一直在使用google chrome检查，以检查我的CSS。

我知道如何获取汉堡菜单，但无法弄清楚如何生成新的导航栏并为更大的屏幕尺寸取下导航栏。我希望有人可以为此指向我，因为我自己找不到合适的人。

<body>
    <div style="background: #6B7A8F; width: 100vw; height: 100vh;">
        <div class="container">
            <ul class="nav navbar navbar-expand-md fixed-top navbar-light navbar-custom-bg justify-content-center ">
                <li class="nav-item">
                    <a class="nav-link navbar-custom-items " style="background: #6B7A8F; " href="# ">MY NAME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link navbar-custom-items " style="background: #F7882F; " href="# ">SERVICES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link navbar-custom-items " style="background: #F7C331; " href="# ">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link navbar-custom-items " style="background: #DCC7AA; " href="# ">CONTACT</a>
                </li>
            </ul>
        </div>
        <div class="container" style="background: #6B7A8F; padding-top: 13%; width: 50%; height: 100vh;">
            <div style="width: 100%; height: 0px; text-align: right; font-family: 'Righteous'; padding: 0px; margin: 0px;">
                <h1>Greetings! </h1>
            </div>

            <div class="container-fluid overflow-auto " style="background: #DCC7AA; border: 20px solid #F7882F; height: 80%; margin-top: 9%; padding: 3%; color: white;">


                <h2>My Heading</h2>
                <!-- <div class="row ">
                <div class="col "></div>
                <div class="col-8 ">I'm content inside the grid!</div>
                <div class="col "></div>
            </div> -->
            </div>
        </div>
        <div style="background: #F7882F; width: 100vw; height: 100vh;">
            <div class="container" style="background: #F7882F; padding-top: 5%; width: 50%; height: 100vh;">
                <div style="width: 100%; height: 4%; text-align: right; font-family: 'Righteous';">
                    <h1>What I offer:</h1>
                </div>
                <div class="container-fluid overflow-auto " style="background: #DCC7AA; border: 20px solid #F7C331; height: 88%; margin-top: 5%; padding: 3%; color: white;">

                    <h2>My Heading</h2>
                    <!-- <div class="row ">
                    <div class="col-2 "></div>
                    <div class="col-8 ">I'm content inside the grid!</div>
                    <div class="col-2 "></div>
                </div> -->
                </div>
            </div>
        </div>
    </div>

我希望导航栏可以缩放，直到它达到bootstrap 4中的中等分辨率。然后，我基本上需要一个完全不同的菜单。另外，我的内容领域并没有像我希望的那样扩展。 -另外感到好奇的是，如果我使用px而不是百分比以及其他我尝试做的“响应”元素，是否会在bootstrap 4中自动使用px的比例？还是我做得正确？

谢谢！

Answer 1

首先，从容器div中删除导航栏，然后将导航栏放入导航栏中。我编辑了您的代码：

<body>
<nav class="navbar navbar-expand-md fixed-top navbar-light navbar-custom-bg justify-content-center ">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link navbar-custom-items " style="background: #6B7A8F; " href="# ">MY NAME</a>
        </li>
        <li class="nav-item">
            <a class="nav-link navbar-custom-items " style="background: #F7882F; " href="# ">SERVICES</a>
        </li>
        <li class="nav-item">
            <a class="nav-link navbar-custom-items " style="background: #F7C331; " href="# ">ABOUT</a>
        </li>
        <li class="nav-item">
            <a class="nav-link navbar-custom-items " style="background: #DCC7AA; " href="# ">CONTACT</a>
        </li>
    </ul>
</nav>
<div style="background: #6B7A8F; width: 100vw; height: 100vh;">
    <div class="container" style="background: #6B7A8F; padding-top: 13%; width: 50%; height: 100vh;">
        <div style="width: 100%; height: 0px; text-align: right; font-family: 'Righteous'; padding: 0px; margin: 0px;">
            <h1>Greetings! </h1>
        </div>

        <div class="container-fluid overflow-auto " style="background: #DCC7AA; border: 20px solid #F7882F; height: 80%; margin-top: 9%; padding: 3%; color: white;">


            <h2>My Heading</h2>
            <!-- <div class="row ">
            <div class="col "></div>
            <div class="col-8 ">I'm content inside the grid!</div>
            <div class="col "></div>
        </div> -->
        </div>
    </div>
    <div style="background: #F7882F; width: 100vw; height: 100vh;">
        <div class="container" style="background: #F7882F; padding-top: 5%; width: 50%; height: 100vh;">
            <div style="width: 100%; height: 4%; text-align: right; font-family: 'Righteous';">
                <h1>What I offer:</h1>
            </div>
            <div class="container-fluid overflow-auto " style="background: #DCC7AA; border: 20px solid #F7C331; height: 88%; margin-top: 5%; padding: 3%; color: white;">

                <h2>My Heading</h2>
                <!-- <div class="row ">
                <div class="col-2 "></div>
                <div class="col-8 ">I'm content inside the grid!</div>
                <div class="col-2 "></div>
            </div> -->
            </div>
        </div>
    </div>
</div>

Bootstrap 4导航栏和扩展问题

1 个答案: