问题：

如何在较小的分辨率下修复我在文档底部出现的侧边栏

江同化

2023-03-14

您好，下面的代码生成了一个带有一些lorem文本和侧栏的引导页面，但是当浏览器窗口的大小变小时，它会出现在文档的底部，而不是侧边，当分辨率很小时，它会被隐藏起来，这是为了在中等分辨率时，如何使它出现在侧边？

null

.sidebar-user-box {
    padding: 4px;
    margin-bottom: 4px;
    font-weight: bold;
    cursor: pointer;
    color: white;
}

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Page style -->
    <link rel="stylesheet" href="CSS/index.css">

    <!-- Title -->
    <title>Social Media Site</title>
</head>

<body>
    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Social Media Site</a>
            <div class="d-flex align-items-center">
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 col-xs-9 pt-3 px-4">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-5 col-sm-4 col-xs-12" style="background-color: blue;"></div>

                        <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: white;">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
                        </div>

                        <div class="col-md-3 col-sm-3 col-xs-12" style="background-color: blue;"></div>
                    </div>
                </div>

                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-5 col-sm-4 col-xs-12" style="background-color: darkblue;"></div>

                        <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: gray;">
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate
                                in?
                            </p>
                        </div>

                        <div class="col-md-3 col-sm-3 col-xs-12" style="background-color: darkblue;"></div>
                    </div>
                </div>
            </main>

            <nav class="col-lg-2 col-md-3 d-none d-sm-block d-md-block bg-dark sidebar">
                <div class="sidebar-sticky">
                    <ul class="nav flex-column">
                        <li class="nav-item sidebar-user-box" id="1">
                            <span id="slider-username">User</span>
                        </li>
                        <li class="nav-item sidebar-user-box" id="2">
                            <span id="slider-username">User (2)</span>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</body>

</html>

null

共有1个答案

杨海

2023-03-14

如果要将其隐藏在small上，请删除d-sm-block。

    <nav class="col-lg-2 col-md-3 d-none d-md-block bg-dark sidebar">
        <div class="sidebar-sticky">
            <ul class="nav flex-column">
                <li class="nav-item sidebar-user-box" id="1">
                    <span id="slider-username">User</span>
                </li>
                <li class="nav-item sidebar-user-box" id="2">
                    <span id="slider-username">User (2)</span>
                </li>
            </ul>
        </div>
    </nav>

如果要在small的侧面显示，请将外列断点从col-MD-*更改为col-SM-*。

<div class="container-fluid">
    <div class="row">
        <main role="main" class="col-sm-9 ml-sm-auto col-lg-10 px-4">
            <div class="container-fluid">
                <div class="row">
                    ...
                </div>
            </div>
            <div class="container-fluid">
                <div class="row">
                    ...
                </div>
            </div>
        </main>
        <nav class="col-lg-2 col-sm-3 d-none d-sm-block bg-dark sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item sidebar-user-box" id="1">
                        <span id="slider-username">User</span>
                    </li>
                    <li class="nav-item sidebar-user-box" id="2">
                        <span id="slider-username">User (2)</span>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

https://codepley.com/p/wyzu1ebafq

注意:Bootstrap 4或Bootstrap 5中没有-xs-中缀，因此col-xs-*类没有执行任何操作。此外，引导程序5不需要jQuery。

类似资料：

如何在Pygame中获得显示器的分辨率？

问题内容：我只是想知道我是否有可能在Pygame中获得显示器的分辨率，然后使用这些尺寸创建一个窗口，以便启动程序来检测显示器的分辨率，然后将窗口自动适合全屏显示。我目前正在使用该窗口。我知道您可以使用来获得包括显示器分辨率在内的视频信息，但是如何提取这些值，然后在???中使用它们呢？在此先感谢Ilmiont 问题答案：您可以使用：该文件说： current_h，current_w：当前视
文档顶部的小边距/间隙

问题内容：我前一段时间遇到了这个问题，忘记了解决方案是什么。我在文档的顶部有一个小间隙，也许5/10像素？我想您会知道我在说什么，该如何摆脱呢？谢谢问题答案：在您的CSS文件中添加以下内容：
低分辨率Mandelbrot分形不。。。足够高的分辨率？

好的，这里有一个奇怪的问题，我有问题（用gcc btw编译）下面是用于命令提示的Mandelbrot分形生成器的源代码。我以前做过这项工作，我想加快自己的测试速度，看看我能以多快的速度生成命令提示符中实际生成Mandelbrot分形所需的代码。我经常这样做是为了给自己找点乐子不管怎样，我遇到了一个新问题，我不太明白问题是什么。当分形呈现时，无论我设置了多少次迭代或什么转义值，它都将始终显示为椭
如何找出YUV4:2:0文件中的分辨率和帧数？

如果我知道图像中有多少像素（亮度样本），如何找出YUV4:2:0文件中的分辨率和帧数？
tkinter小部件在不同分辨率的监视器上的位置错误

我正在和我的朋友开发一个小问答游戏。我正在使用在屏幕上定位一个小部件(tk.button)，问题是当我在笔记本电脑上运行代码时，我得到一个结果，而他得到另一个结果。我的结果：他的结果是：我们使用不同的操作系统（我使用Linux，他使用Windows)，但我认为这里的问题是我们的监视器分辨率，它们是不同的。这到底是什么问题？我该怎么解决这个？
如何在Java中获得屏幕分辨率？

问题内容：如何获得以像素为单位的屏幕分辨率（宽x高）？我正在使用JFrame和Java swing方法。问题答案：你可以使用该方法获取屏幕尺寸。在多显示器配置中，你应该使用以下命令：如果要在DPI中获得屏幕分辨率，则必须使用上的getScreenResolution()方法Toolkit。

如何在较小的分辨率下修复我在文档底部出现的侧边栏

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档