我有一个页面，其中有一个侧边栏可以打开不同的页面。它在宽屏幕上按需要工作，将侧边栏移动到右侧，但是当我在移动屏幕上尝试这个时，侧边栏移动到小屏幕。拜托，我需要帮助让它在宽屏幕和移动屏幕的右侧工作。
以下是我的页面的 HTML 和 CSS。
我在互联网上搜索过，但没有得到任何解决方案。在我这边，我尝试用 HTML 更改页面的方向，但它不起作用。
/* CSS Document */
body {
background-color: #599cff;
font-family: sans-serif, Arial, Helvetica;
/*direction:rtl;*/
/*font-family: times-new-roman;*/
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px solid #47748b;
/*margin: 5px 0;*/
}
#sidebar {
font-family: sans-serif;
overflow: hidden;
z-index: 3;
/*direction:rtl;*/
/*height:100vh;*/
/*overflow-y: scroll;*/
}
#sidebar h3 {
font-size: .8em;
color: #F0F8FF;
text-transform: uppercase;
}
h6 {
text-transform: uppercase;
color: #a9a9a9;
font-size: .7em;
font-weight: bold;
}
#sidebar .list-group {
max-width: 300px;
background-color: #006666;
/*#333;*/
min-height: 100vh;
}
#sidebar i {
margin-right: 6px;
}
#sidebar .list-group-item {
border-radius: 4;
background-color: #006666;
/*#333;*/
color: #F0F8FF;
/*#333;#ccc;*/
border-left: 0;
border-right: 0;
border-top: 0;
font-size: .9em;
/*border-color: #0d8686;#2c2c2c;*/
#F0F8FF-space: nowrap;
}
#sidebar .list-group-item:hover {
background-color: #F0F8FF;
color: #333;
}
/* highlight active menu */
#sidebar .list-group-item:not(.collapsed) {
background-color: #73abab;
/*#222;*/
/*border-color:#99cccc;#006666;*/
}
/* closed state */
#sidebar .list-group .list-group-item[aria-expanded="false"]::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 5px;
}
/* open state */
#sidebar .list-group .list-group-item[aria-expanded="true"] {
background-color: #006666;
/*#222;*/
color: #F0F8FF;
/*border-color:#99cccc;*/
}
#sidebar .list-group .list-group-item[aria-expanded="true"]::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 5px;
}
/* level 1*/
#sidebar .list-group .collapse .list-group-item,
#sidebar .list-group .collapsing .list-group-item {
padding-left: 20px;
}
/* level 2*/
#sidebar .list-group .collapse>.collapse .list-group-item,
#sidebar .list-group .collapse>.collapsing .list-group-item {
padding-left: 30px;
}
/* level 3*/
#sidebar .list-group .collapse>.collapse>.collapse .list-group-item {
padding-left: 40px;
}
@media (max-width:768px) {
#sidebar {
min-width: 35px;
max-width: 40px;
overflow-y: auto;
overflow-x: visible;
transition: all 0.25s ease;
transform: translateX(-45px);
/*position: fixed;*/
}
#sidebar.show {
transform: translateX(0);
}
#sidebar::-webkit-scrollbar {
width: 0px;
}
#sidebar,
#sidebar .list-group {
min-width: 35px;
overflow: visible;
}
/* overlay sub levels on small screens */
#sidebar .list-group .collapse.show,
#sidebar .list-group .collapsing {
position: relative;
z-index: 1;
width: 190px;
top: 0;
}
#sidebar .list-group>.list-group-item {
text-align: center;
padding: .75rem .5rem;
}
#sidebar h3 {
font-size: .50em;
}
/* hide caret icons of top level when collapsed */
#sidebar .list-group>.list-group-item[aria-expanded="true"]::after,
#sidebar .list-group>.list-group-item[aria-expanded="false"]::after {
display: none;
}
}
.collapse.show {
visibility: visible;
}
.collapsing {
visibility: visible;
height: 0;
-webkit-transition-property: height, visibility;
/*-moz-transition-property: height, visibility;*/
transition-property: height, visibility;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.collapsing.width {
-webkit-transition-property: width, visibility;
/*-o-transition-property:width, visibility;*/
transition-property: width, visibility;
width: 0;
height: 100%;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.language {
float: right;
text-align: center;
line-height: 41px;
height: 40px;
position: relative;
font-family: 'Conv_STC-Regular';
cursor: pointer;
margin-top: -1px;
}<html lang="en" dir="rtl">
<!--changed here from ltr to rtl-->
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/sidenavbar.css">
<link rel="stylesheet" href="bootstrap/css/font-awesome.min.css">
<link rel="stylesheet" href="bootstrap/css/tabs.css">
<title>Bootstrap Side NavBar</title>
</head>
<body>
<div class="container-fluid pl-4 pt-2 ml-auto">
<div class="row d-flex d-md-block flex-nowrap wrapper pr-2 flex-row-reverse">
<!--added here flex-row-reverse -->
<div class="col-md-3 float-right col-1 pl-0 pr-2 width show collapse" id="sidebar" aria-expanded="true">
<!--added here float-right,-->
<!--add "collapse" in the class to hide on page load -->
<div class="list-group border-0 card text-center text-md-right">
<!-- changed here from text-md-left to text-md-right -->
<div style="text-align:center;">
<img src="images/userid.jpg" style="width:40%;border-radius:50%"></img>
<h3>User</h3>
</div>
<div class="line"> </div>
<a href="#manifest" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false">
<i class="fa fa-truck"></i>
<span class="d-none d-md-inline">Manifest/Operation</span>
</a>
<div class="collapse" id="manifest">
<a href="#" class="list-group-item" data-parent="#manifest">Upload Truck Pre Arrival</a>
<a href="#" class="list-group-item" data-parent="#manifest">Generate DO</a>
<a href="#" class="list-group-item" data-parent="#manifest">Check In Gate</a>
<a href="#" class="list-group-item" data-parent="#manifest">Check Out Gate</a>
<a href="#" class="list-group-item" data-parent="#manifest">Generate Gatepass</a>
</div>
<a href="#billing" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false">
<i class="fa fa-dollar"></i>
<span class="d-none d-md-inline">Billing</span>
</a>
<div class="collapse" id="billing">
<a href="#" class="list-group-item" data-parent="#billing">Charge/Service Codes</a>
<a href="#" class="list-group-item" data-parent="#billing">Vat Setup</a>
<a href="#" class="list-group-item" data-parent="#billing">Generate Invoice</a>
</div>
<a href="#commercial" class="list-group-item d-inline-block collapsed" data-parent="#sidebar" data-toggle="collapse" aria-expanded="false">
<i class="fa fa-shopping-cart"></i>
<span class="d-none d-md-inline">Commercial</span>
</a>
<div class="collapse" id="commercial">
<a href="#" class="list-group-item" data-parent="#commercial">Customer Details</a>
<a href="#" class="list-group-item" data-parent="#commercial">Contract Details</a>
<a href="#" class="list-group-item" data-parent="#commercial">Creating Tariffs</a>
</div>
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-briefcase"></i>
<span class="d-none d-md-inline">Finance</span>
</a>
<a href="#admin" class="list-group-item d-inline-block collapsed" data-parent="#sidebar" data-toggle="collapse" aria-expanded="false">
<i class="fa fa-wrench"></i>
<span class="d-none d-md-inline">Admin Tools</span>
</a>
<div class="collapse" id="admin">
<a href="#" class="list-group-item" data-parent="#commercial">Modules</a>
<a href="#" class="list-group-item" data-parent="#commercial">Menu Items</a>
<a href="#" class="list-group-item" data-parent="#commercial">User Group</a>
<a href="#" class="list-group-item" data-parent="#commercial">Login Users</a>
<a href="#" class="list-group-item" data-parent="#commercial">Bilingual Interface Setup</a>
<a href="#" class="list-group-item" data-parent="#commercial">Bilingual Message Setup</a>
<a href="#" class="list-group-item" data-parent="#commercial">System Codes</a>
</div>
<a href="#settings" class="list-group-item d-inline-block collapsed" data-parent="#sidebar" data-toggle="collapse" aria-expanded="false">
<i class="fa fa-sliders"></i>
<span class="d-none d-md-inline">Settings</span>
</a>
<div class="collapse" id="settings">
<a href="#" class="list-group-item" data-parent="#settings">Company Profile</a>
</div>
</div>
<div class="line"> </div>
</div>
<main class="col-md-12 col px-5 pl-md-2 pt-0 main mx-auto" style="background-color:white;border-radius:4px">
<div class="row pl-md-1 pl-0">
<div class="col-md-1 pl-md-0">
<a href="#" data-target="#sidebar" data-toggle="collapse" aria-expanded="true">
<i class="fa fa-navicon fa-2x py-2 p-1"></i>
</a>
</div>
<div class="col-md-8 pl-md-0 pl-5">
<div class="pt-3">
<h6>Saudi Development & Export Services Co. Ltd.</h6>
</div>
</div>
<div class="col-md-2 pl-0 pr-5" style="text-align:left">
<div class="language pt-1">
<a href="#" style="text-decoration:none">
<i class="fa fa-globe"></i> English
</a>
</div>
</div>
</div>
<hr>
<div class="row pl-md-1 pl-1">
<div class="col-md-12 pl-0">
<p class="lead">DashBoard</p>
</div>
</div>
<div class="tab-content">
<div class="os-tabs-controls">
<ul class="nav nav-pills upper">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#para" aria-expanded="true">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#control" aria-expanded="false">Item2</a>
</li>
</ul>
</div>
<div id="para" class="tab-pane active" aria-expanded="true">
<div class="row pl-md-1 pl-0">
<div class="col-md-10 pl-1 pt-1" style="border-top:3px solid black">
<button role="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo" aria-expanded="true">
horizontal collapsible
</button>
<div id="demo" class="width collapse show" aria-expanded="true">
<div class="list-group">
<!--style="width:600px;"-->
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-md-2 pl-md-0 pl-1 pt-1" style="border-top:3px solid black">
<button role="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo2" aria-expanded="true">
vertical collapsible
</button>
<div id="demo2" class="height collapse show" aria-expanded="true">
<div class="list-group">
<!--style="width:200px;"-->
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</div>
</div>
</div>
</div>
</div>
<div id="control" class="tab-pane" aria-expanded="false">
<div class="row pl-md-1 pl-0 pt-2" style="border-top:3px solid black">
<div class="col-md-2 pl-1">
<label>User ID:</label>
</div>
<div class="col-md-10 pl-md-0 pl-1">
<input type="text" name="username" />
</div>
</div>
<div class="row pl-md-1 pl-0">
<div class="col-md-2 pl-1">
<label>User Password:</label>
</div>
<div class="col-md-10 pl-md-0 pl-1">
<input type="password" name="password" />
</div>
</div>
<div class="row pl-md-1 pl-0">
<div class="col-md-2 pl-1">
<label>User Profile:</label>
</div>
<div class="col-md-10 pl-md-0 pl-1">
<input type="text" name="profile" />
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>最佳答案
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ddd;
}
.navbar ul,
.navbar li {
display: inline-block;
}
@media (min-width: 767px) {
.navbar {
position: fixed;
top: 50%;
right: 0;
left: initial;
width: 125px;
background-color: #ddd;
/*width: 0%;*/
}
.navbar ul,
.navbar li {
display: block;
}
}<nav class="navbar">
<ul class="navbar-top-right">
<li><button onclick="jump('header')">home</button></li>
<li><button onclick="jump('special')">Special</button></li>
<li><button onclick="jump('menu')">Menu</button></li>
<li><button onclick="jump('map')">Map</button></li>
<li><button onclick="jump('about')">About</button></li>
</ul>
</nav>关于html - 在移动屏幕中将侧导航栏移至右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59025572/