Question

菜单在桌面计算机的屏幕上正确显示。但是，当我在手机上运行页面时，菜单太宽（在屏幕外），我无法将其调整为屏幕分辨率。 html代码如下：

<!-- Start Header Section -->
<header class="main_menu_sec navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-12">
                <div class="lft_hd">
                    <a href="http://cybid.com.pl/"><img src="img/logo.png" alt=""/></a>
                </div>
            </div>          
            <div class="col-lg-9 col-md-9 col-sm-12">
                <div class="rgt_hd">                    
                    <div class="main_menu">
                        <nav id="nav_menu">
                        <div id="navbar">

                            <ul>
                                ...
                            </ul>
...
</header>

如何在PC屏幕上实现更小分辨率的更改？如何更改代码？

感谢您提前回复。

Answer 1

您是否考虑在CSS文件中使用@media queries？

这些允许您根据屏幕宽度等参数更改样式。

例如，如果我想更改最大屏幕宽度为480px的元素的样式，我可以写：

@media only screen and (max-width: 480px) {
     -your styles here-
}

对于您的代码，您可以在主菜单类上运行媒体查询，并可能尝试消除边距：

@media only screen and (max-width: 480px) {
     .main_menu {
        margin: 0;
    }
}

我希望这是一个有用的起点 - 如果您有任何问题，请告诉我！

Answer 2

我发现了问题。我在不同的部分放了太宽的div而没有针对媒体分辨率进行优化。

现在一切都很好。

Bootstrap - 智能手机上的菜单太宽

2 个答案: