Итак, я пытался создать веб-страницу с боковой панелью и основным контентом. Проблема в том, что когда размер переходит к S / XS, основное содержимое сдвигается влево, оставляя поле справа, а боковая панель и основное содержимое перекрываются. Я надеюсь избавиться от этой проблемы. Вот некоторый код и несколько скриншотов. Это то, что выглядит на экране размером с экран компьютера (работает нормально) Это то, что выглядит на экране размером ~ m или, возможно, размером s, который также выглядит отлично И это ужасно выглядящий экран s / XS с перекрывающимся контентом и тем, чего я надеюсь избежать (я хочу, чтобы он больше походил на предыдущее изображение, а не сдвигал основной контент влево)
<body>
<div class="container-fluid">
<div class="row d-flex d-md-block flex-nowrap wrapper">
<div class="col-md-2 float-left pl-0 pr-0 collapse width show" id="sidebar">
<div class="list-group border-0 card bg-faded text-center text-md-left">
<a href="{% url 'landing:index' %}" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fas fa-home"></i> <span class="hidden-sm-down">返回首页</span></a>
<a href="{% url 'dashboard:dashboard' %}" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fas fa-tachometer-alt"></i> <span class="hidden-sm-down">仪表盘</span></a>
<a href="#menu1" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fas fa-user"></i> <span class="hidden-sm-down">角色管理</span> </a>
<div class="collapse {% if player_bar %}show{% endif %}" id="menu1">
<a href="{% url 'player_management:chest' %}" class="list-group-item" data-parent="#menu1">装备管理</a>
<a href="#" class="list-group-item" data-parent="#menu1">修改名称</a>
<a href="{% url 'player_management:transfer_money' %}" class="list-group-item" data-parent="#menu1">转账</a>
<a href="#" class="list-group-item" data-parent="#menu1">头衔管理</a>
</div>
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fas fa-door-closed"></i> <span class="hidden-sm-down">房门控制</span></a>
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fas fa-users-cog"></i> <span class="hidden-sm-down">势力管理</span></a>
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fas fa-ticket-alt"></i> <span class="hidden-sm-down">提交工单</span></a>
{% if user.is_staff %}
<a href="#menu3" class="list-group-item d-inline-block" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fas fa-crown"></i> <span class="hidden-sm-down">管理功能</span></a>
<div class="collapse {% if admin_bar %}show{% endif %}" id="menu3">
<a href="{% url 'admin_panel:add_ban' %}" class="list-group-item" data-parent="#menu3">封禁用户</a>
<a href="#" class="list-group-item" data-parent="#menu3">封禁查询</a>
<a href="#" class="list-group-item" data-parent="#menu3">玩家查询</a>
<a href="#" class="list-group-item" data-parent="#menu3">记录查询</a>
<a href="#" class="list-group-item" data-parent="#menu3">领主门钥匙发放</a>
<a href="#" class="list-group-item" data-parent="#menu3">势力管理</a>
<a href="#" class="list-group-item" data-parent="#menu3">工单管理</a>
</div>
{% endif %}
<a href="#menu4" class="list-group-item d-inline-block" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fas fa-lock"></i> <span class="hidden-sm-down">账号管理</span></a>
<div class="collapse {% if account_bar %}show{% endif %}" id="menu4">
<a href="{% url 'account:change_password' %}" class="list-group-item" data-parent="#menu4">修改密码</a>
<a href="#" class="list-group-item" data-parent="#menu4">修改密保</a>
<a href="#" class="list-group-item" data-parent="#menu4">操作记录</a>
<a href="#" class="list-group-item" data-parent="#menu4">登陆记录</a>
<a href="{% url "authentication:logout" %}" class="list-group-item" data-parent="#menu4">退出登录</a>
</div>
</div>
</div>
<main class="col-sm-10 float-sm-left col-8 px-md-3 py-3 main">
<a href="#" data-target="#sidebar" data-toggle="collapse"><i class="fa fa-bars fa-lg py-2 p-1"></i></a>
{% block main_block %} {% endblock %}
</main>
</div>