Laravel中Bootstrap响应式导航栏小屏幕适配问题求助

我正在学习前端开发，在Laravel项目中使用Bootstrap构建导航栏。该导航栏在大屏设备上显示正常，但在小屏幕下按钮会偏向右方，部分内容（如“Administrimi”）超出屏幕范围。希望能解决导航栏的响应式适配问题，使其在屏幕尺寸变化时保持正常显示。

HTML代码 #

<div>
<nav id="sidebar" class="active">

<div class="text-start">
    <div class="sidebar-header">
        <img src="{{ asset('assets/img/cash-flow.png') }}" class="image" alt="logo" class="app-logo">
    </div>

    <div class="horizontal-menu">
        <div class="row">

            <div class="col-sm-1">
                <div class="dropdown">
                <a href="/"><button class="dropDownButton"><i class="fas fa-home"></i>&nbsp;Dashboard</button></a>
                </div>
            </div>

            <div class="col-sm-1">
                <div class="dropdown">
                    <button class="dropDownButton">
                        <i class="fas fa-list"></i>
                         Veprime</button>
                    <div class="dropdown-content">
                        <a href="/orders"><i class="fas fa-solid fa-plus"></i>&nbsp;Porosite</a>
                        <a href="/outlay"><i class="fas fa-money-bill-wave"></i>&nbsp;Konfirmo shpenzim</a>
                        <a href="/cash-received"><i class="fas fa-receipt"></i>&nbsp;Konfirmo Arketim</a>
                        <a href="/my-actions"><i class="fas fa-solid fa-user-pen"></i>&nbsp;Veprimet e mia</a>
                    </div>
                </div>
            </div>

            <div class="col-sm-1">
                <div class="dropdown">
                    <button class="dropDownButton">
                        <i class="fas fa-solid fa-check-to-slot"></i>&nbsp;Arka</button>
                    <div class="dropdown-content">
                        <a href="/cash-register"><i class="fas fa-cash-register"></i>&nbsp;Arka</a>
                        <a href="/convert"><i class="fas fa-coins"></i>&nbsp;Konvertim</a>
                        <a href="/currencies"><i class="fas fa-solid fa-hand-holding-dollar"></i>&nbsp;Monedhat</a>
                    </div>
                </div>
            </div>

            <div class="col-sm-1">
                <div class="dropdown">
                    <button class="dropDownButton">
                        <i class="fas fa-solid fa-screwdriver-wrench"></i>&nbsp;Administrimi</button>
                    <div class="dropdown-content">
                        <a href="/users"><i class="fas fa-user"></i>&nbsp;Perdoruesit</a>
                        <a href="/roles"><i class="fas fa-random"></i>&nbsp;Rolet</a>
                    </div>
                </div>
            </div>

            <div class="col-sm-1">
                <div class="dropdown">
                    <a href="/actions"> <button class="dropDownButton"><i class="fas fa-solid fa-file-invoice"></i>&nbsp;Faturimi</button></a>
                </div>
            </div>

            <div class="col-sm-1">
                <div class="dropdown">
                    <a href="/outlay/employee"><button class="dropDownButton"><i class="fas fa-regular fa-share-from-square"></i>&nbsp;Shpenzimet e mia</button></a>
                </div>
            </div>

            <div class="col-sm-1">
                <div class="dropdown">
                    <a href="#" id="nav2" class="nav-item nav-link dropdown-toggle text-secondary" data-bs-toggle="dropdown" aria-expanded="false"> <button class="dropDownButton">
                            <i class="fas fa-user"></i> <span>{{ auth()->user()->name }}</span>
                        </button></a>

                    <div class="dropdown-profile">
                        <a href="/profile" class="dropdown-item"><i class="fas fa-address-card"></i>&nbsp;Profili</a>
                        <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="dropdown-item">
                            <i class="fas fa-sign-out-alt">
                            </i>&nbsp;Logout
                        </a>
                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                            {{ csrf_field() }}
                        </form>
                    </div>

                </div>
            </div>

        </div>
    </div>
    </div>
    </nav>
</div>
    @include('partials.menu-horizontal')

CSS代码 #

<script
    src="https://code.jquery.com/jquery-3.6.0.js"
    integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>

<!--Font Awesome-->
<link
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    rel="stylesheet"
/>

<!-- Google Fonts-->
<link
    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    rel="stylesheet"
/>
<!--MDB-->
<link
    href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.css"
    rel="stylesheet"
/>
<script
    type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"
></script>

<style>

    .dropDownButton {
        background-color: white;
        color: #6c757d;
        padding: 16px;
        font-size: 16px;
        border: none;
        width:200px;
    }

    .horizontal-menu{
            width:850%;
            top:10px;
            margin-left: 210%;
    }

    .dropdown {
        width:90px;
        margin-top: -55px;
        margin-left: 6%;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        width: 200%;
        z-index: 1;
    }

    .dropdown-profile {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        width: 220%;
        z-index: 1;
    }

    .dropdown-profile a{
        color: black;
        padding: 12px 16px;
        text-decoration: none;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    a{
       color:#6c757d;
    }

    .dropdown-content a:hover {background-color: #2196f3; color:white;}

    .dropdown-item:hover {background-color: #2196f3; color:white;}

    .dropdown:hover .dropdown-profile {display: block;}

    .dropdown:hover .dropdown-content {display: block;}

    .dropdown:hover .dropDownButton {background-color: #2196f3; color:white;}

    .image{
        width:100px;
        height:48px;
        margin-left: 150%;
    }
</style>

显示效果 #

小屏幕显示 #

大屏显示 #

内容的提问来源于stack exchange，提问作者laraCoder