Bootstrap 4移动端菜单及语言切换器放大可见性优化求助

针对你遇到的移动端导航元素过小的问题，我们可以通过调整CSS样式，针对性放大移动端下的导航项、语言切换按钮及下拉菜单元素，具体修改如下：

修改后的完整代码 #

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.1/css/flag-icon.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
    .phone-link {
        border-radius: 25px;
        background-color: lightblue;
        color: #ffffff;
        padding: 15px 25px;
    }
    .navbar-nav {
        margin-right: 40px;
    }
    .navbar-nav .nav-item {
        padding: 25px;
    }
    @media (max-width: 999px) {
        .phone-link {
            display: none;
        }
    }
    .dropdown.language {
        position: absolute; 
        right: 150px; 
        width: auto;
        top: 35px;
    }
    /* 移动端专属优化样式 */
    @media (max-width: 991px) {
        .dropdown.language {
            right: 60px; /* 调整位置避免和汉堡菜单重叠 */
            top: 10px;
        }
        /* 放大导航项的点击区域和文字 */
        .navbar-nav .nav-item {
            padding: 15px 25px;
        }
        .navbar-nav .nav-link {
            font-size: 1.2rem;
        }
        /* 放大语言切换按钮 */
        .dropdown.language .btn {
            width: 180px;
            height: 50px;
            font-size: 1.1rem;
            padding: 0 15px;
        }
        /* 优化下拉菜单样式 */
        .dropdown-menu .dropdown-item {
            font-size: 1.1rem;
            padding: 12px 15px;
        }
        /* 调整导航下拉菜单的位置，避免错位 */
        .navbar-nav .dropdown-menu {
            position: static !important;
            top: auto !important;
            left: auto !important;
        }
    }
</style>

<nav class="navbar navbar-light" style="background-color: #e3f2fd; ">
    <a class="navbar-brand" href="#">
        <img src="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-solid.svg" width="30" height="75" alt="">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
    <div class="dropdown language">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="flag-icon flag-icon-us"></span> English
        </button>
        <div class="dropdown-menu dropdown-menu-left text-left">
            <a class="dropdown-item" href="#fr"><span class="flag-icon flag-icon-fr"> </span> French</a>
            <a class="dropdown-item" href="#it"><span class="flag-icon flag-icon-it"> </span> Italian</a>
            <a class="dropdown-item" href="#ru"><span class="flag-icon flag-icon-ru"> </span> Russian</a>
        </div>
    </div>
</nav>

关键改动说明 #

1. 调整语言切换器位置：移动端下将语言切换器的right值改为60px，避免和右侧的汉堡菜单按钮重叠。
2. 放大导航项：增大移动端导航项的内边距，同时将导航文字字号提升到1.2rem，提升点击区域和可读性。
3. 优化语言切换按钮：修正原代码中缺失单位的width/height属性，增大按钮尺寸并提升文字字号，让按钮更显眼。
4. 优化下拉菜单：放大下拉菜单项的文字和内边距，提升移动端点击体验；同时修正导航下拉菜单的定位，避免在移动端出现错位问题。
5. 清理冗余代码：移除了原代码中多余的<p>标签和重复的language类，避免样式冲突。

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