用HTML和CSS制作一个简单的侧边栏布局

1u4esq0p  于 2023-02-17  发布在  其他
关注(0)|答案(9)|浏览(5675)

我一直在尝试做一个简单的HTML布局，左边是边栏，右边是容器。我写的CSS代码如下：

body{
    margin: 0;
    padding:0;
}
.sidebar,.content{
    background: #333;
    color: #fff;
    height: 500px;
    border-radius: 4px;
    margin: 20px;
    border:1px solid #777;
}
.sidebar{
    width: 300px;
    float: left;
    position: absolute;
}
.content{
    width: 630px;
}

简单的HTML如下所示：

<body>
  <div class="sidebar"> </div>

  <div class="content">  </div>
</body>

但它似乎不工作，虽然我认为使用浮动：左解决了这个问题，但它似乎是正确的是去另一个顶部。
JSF中间文件：Click here to see the JS Fiddle

css

9条答案

按热度按时间
p8ekf7hl

p8ekf7hl1#

下面是使用Flexbox实现此操作的一种稍微更灵敏的方法：

body {
    margin: 0;
    padding:0;
}

.container {
    display: flex;
    flex-direction: row;
}

.sidebar,
.content {
    display: flex;
    flex-direction: column;
    background: #333;
    color: #fff;
    min-height: 500px;
    border-radius: 4px;
    margin: 20px;
    border:1px solid #777;
}

.sidebar {
    flex-grow: 1;
    min-width: 300px;
}

.content {
    flex-grow: 5;
    min-width: 630px;
}
<body>
    <div class="container">
        <div class="sidebar">
            <ul>
                <li>These are list items</li>
                <li>These are list items</li>
                <li>These are list items</li>
                <li>These are list items</li>
            </ul>
        </div>
        <div class="content">
            <h1>Content</h1>
            <p>This is some content</p>
        </div>
    </div>
</body>

你可以通过增加/减少flex-grow的值来改变内容div的侧边栏的空间大小。这样它会自动调整不同的屏幕大小。然后你也可以在用户使用移动设备时隐藏侧边栏或堆叠它们，这取决于你的喜好。

赞(0）分享  回复(0）举报  2023-02-17
wz1wpwve

wz1wpwve2#

一个现代而优雅的解决方案是使用CSS网格。

.container {
  width: 100%;
  display: grid;
  grid-template-areas: "sidebar main";
  grid-template-columns: 200px auto;
}

.sidebar {
  grid-area: sidebar;
  height: 100vw;
  background-color: lightgray;
}

.main {
  grid-area: main;
  height: 100vw;
  background-color: gray;
}
<div class='container'>
  <div class='sidebar'>
    // sidebar content
  </div>
  <div class='main'>
    // main page content goes here
  </div>
</div>
赞(0）分享  回复(0）举报  2023-02-17
kzipqqlq

kzipqqlq3#

添加另一个具有overflow: hidden;的div

    • 超文本标记语言**
<body>
  <div class="container">
    <div class="sidebar"></div>
    <div class="content"></div>
  </div>
</body>
    • 中央支助组**
body {
  margin: 0;
  padding:0;
}  
.container {
  overflow: hidden;
}
.sidebar, .content{
  background: #333;
  color: #fff;
  height: 500px;
  border-radius: 4px;
  margin: 20px;
  border:1px solid #777;
}
.sidebar{
  width: 300px;
  float: left;
  position: absolute;
}
.content{
  width: 630px;
}

小提琴示例：
http://jsfiddle.net/skeurentjes/1hchree0/3/

赞(0）分享  回复(0）举报  2023-02-17
pgpifvop

pgpifvop4#

检查小提琴：https://jsfiddle.net/nileshmahaja/1hchree0/1/
更新了您的CSS：

body{
    margin: 0;
    padding:0;
}
.sidebar, .content{
    background: #333;
    color: #fff;
    height: 500px;
    border-radius: 4px;
    border:1px solid #777;
}
.sidebar{

    width: 300px;
    /* float:left  Removed*/
    left:0; /* Added */
    top:0; /* Added */
    position: absolute;
}
.content{
    width: 630px;
    margin-left:300px /* Added */
}

超文本标记语言

<body>
  <div class="sidebar"> </div>

  <div class="content">  </div>
</body>
赞(0）分享  回复(0）举报  2023-02-17
vhmi4jdf

vhmi4jdf5#

    • 尝试使用float：**

CSS：

body {
        margin: 0;
        padding:0;
    }
    .sidebar, .content {
        background: #333;
        color: #fff;
        height: 500px;
        border-radius: 4px;
        border:1px solid #777;
        float:left;
    }
    .sidebar {
        width: 300px;
    }
    .content {
        width: 300px; /*change it according to the design*/
    }
    body:after {
        clear:both;
        content:"";
        display:block; /*For clearing float*/
    }

演示：http://jsfiddle.net/1hchree0/2/

    • 使用display:inline-block：**

CSS：

body {
        margin: 0;
        padding:0;
    }
    .sidebar, .content {
        background: #333;
        color: #fff;
        height: 500px;
        border-radius: 4px;
        border:1px solid #777;
        display:inline-block;
    }
    .sidebar {
        width: 300px;
    }
    .content {
        width: 300px;
    }

超文本：

<body>
    <div class="sidebar"></div><div class="content"></div>
</body>

演示：http://jsfiddle.net/1hchree0/4/

    • 使用display:table**

CSS：

body {
        margin: 0;
        padding:0;
        display:table;
    }
    .sidebar, .content {
        background: #333;
        color: #fff;
        height: 500px;
        border-radius: 4px;
        border:1px solid #777;
        display:table-cell;
    }
    .sidebar {
        width: 300px;
    }
    .content {
        width: 500px;
    }

演示：http://jsfiddle.net/1hchree0/8/

赞(0）分享  回复(0）举报  2023-02-17
rbpvctlc

rbpvctlc6#

你肯定需要一个容器div，否则这段代码不能在旧的浏览器上工作。
超文本标记语言

<body>

<div class="container"> 
    <div class="sidebar">

    </div>
    <div class="content">

    </div>
</div>    
</body>

中央支助系统

body{
        margin: 0;
        padding:0;
    }
.container {
    width:1015px;
}
    .sidebar,.content{
        background: #333;
        color: #fff;
        height: 500px;
        border-radius: 4px;
        margin: 20px;
        border:1px solid #777;
    float: left;
    }
    .sidebar{
        width: 300px;

    }
    .content{
        width: 630px;

    }

检查以下内容：https://jsfiddle.net/blaisemugisha/1hchree0/

赞(0）分享  回复(0）举报  2023-02-17
o3imoua4

o3imoua47#

Demo

.content{
            width: 630px;
            float: right;
            margin-right: 45px; /* change as per your need */
        }
赞(0）分享  回复(0）举报  2023-02-17
bogh5gae

bogh5gae8#

给你一个解决方案

body{
  background-color: lightgray;
}
.container {
  background-color: white;
  width: 800px;
  margin: auto;
  border-radius: 10px;
}

.container .footer {
  background: #4C92FF;
  padding: 10px;
  font-size: 12px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.container .content {
  min-height: 120px;
  margin-left: 1%;
}

.container .content .sidebar {
  width: 200px;
  height:820px;
  float: right;
  background-color: violet;
  border-radius: 2%;

}

.container .header {
  background: #4C92FF;
  height: 80px;
  text-indent: 1%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.maincontent img{
  float: right;
  height: 150x;
  width: 200px;
  margin-right: 1%;
  border-style: solid;
}

.maincontent table, .maincontent td, .maincontent th{
  border-style:double;
  text-align: center;
}

.hitCounter{
  margin-left: 30%;
}

.maincontent{
  text-align: justify;
}
<div class="container">
  <div class="header">
    <h1>Trains in Sri Lanka</h1>
  </div>
  <div class="content">
    <div class="sidebar">
      <h3>Social Profiles</h3>
      <table>
        <tr style="align-content: center">
          <th><a href="https://www.facebook.com" target="_blank"><img src="img/fb.png" style="height: 50px; width: 50px"/></a></th>
          <th><a href="https://www.google.com" target="_blank"><img src="img/g.png" style="height: 50px; width: 50px"/></th>
          <th><a href="https://www.linkedin.com" target="_blank"><img src="img/li.png" style="height: 50px; width: 50px"/></th>
        </tr>
      </table>    
      <hr>
      <h3>Hit Counter</h3>
      <div class="hitCounter">
        <a href='https://freehitcounters.org/' >freehitcounters.org</a> <script type='text/javascript' src='https://www.freevisitorcounters.com/auth.php?id=40ce15186d73fda91d26f71e9ae5cc0169d382b1'></script>
              <script type="text/javascript" src="https://www.freevisitorcounters.com/en/home/counter/425569/t/3"></script>
      </div>

      <hr>
      <h3>Subscribe</h3>
      <div class="subscribeBox">
        <form name="subscriptionForm">
          <input type="email" placeholder="Enter your email address" style="margin-left: 10%"/>
          <input type="submit" value="Subscribe" style="margin-left: 30%"/>
        </form>
      </div>
      <hr>
      <h3>Contact Author</h3>
      <div class="contactBox" style="text-align: center">
        Name:<br> XXX<br>
        <br>
        email:<br> XXX
      </div>
    </div>
    <div class="maincontent">
      <h2>Class M1 Locomotives</h2>
      <img src="img/m1.jpg">
      <p>In the 1950s Sri Lankan railway was seeking replacements for old rolling stock, routine replacement of which had been delayed by World War II. Specifications were for 25 locomotives with 750 hp (559 kW) power at the wheel, available from 12 mph (19 km/h) upwards, and up to an altitude of 6,200 ft (1,900 m). The train was expected to be used for suburban trains centered on Colombo, as well as mail trains in the north of the country, and trains in hill areas: approximately requirements were for a vehicle capable of pulling 550 long tons (560 t; 620 short tons) at 18 mph (29 km/h) on a gradient of 1 in 44 (2.27%) on track with 5-chain (330 ft; 101 m) reverse curves; preferably within a 80 long tons (81 t; 90 short tons) locomotive weight on 6 axles (A1A-A1A). Several firms tendered for the contact; American suppliers were unable to enter a competitive bid due to the devaluation of both the rupee and British pound.</p>
      <hr>
      <h2>Class M2 Locomotives</h2>
      <img src="img/m2.jpg">
      <p>From 1954, several batches of General Motors-manufactured locomotives were imported to Sri Lanka under "The Colombo Plan". Locally called a "Canadian" engine – there are actually two classes of Canadian engine in SLR – the other one is Class M4. Since these engine were imported under grants from the Canadian government, class M2 locomotives are named with Canadian province and city names. The last two locomotives were made in the United States and imported for Cement Corporation, Sri Lanka. But they were later attached to Sri Lanka Railways locomotive fleet. They were named after two local cities – Galle and Kankasanthurei – where the cement factories were located.</p>
      <h4>Sub classes</h4>
      <table>
        <tr> 
          <th>Sub Class</th>
          <th>Weight</th>
          <th>Axel Arrangement</th>
          <th>Year</th>
          <th>No.of Locomotives</th>
        </tr> 

        <tr>
          <td>M2A</td>
          <td rowspan="4">79 Tonnes</td>
          <td>AIA - AIA</td>
          <td>1959</td>
          <td>3</td>
        </tr>

        <tr>
          <td>M2A</td>
          <td>AIA - AIA</td>
          <td>1959</td>
          <td>3</td>
        </tr>
      
        <tr>
          <td>M2A</td>
          <td>AIA - AIA</td>
          <td>1959</td>
          <td>3</td>
        </tr>
      
        <tr>
          <td>M2A</td>
          <td>AIA - AIA</td>
          <td>1959</td>
          <td>3</td>
        </tr>
      </table>
    </div>
  </div>
  <div class="footer">
    © 2017 | Trains in Sri Lanka
  </div>
</div>
赞(0）分享  回复(0）举报  2023-02-17
2guxujil

2guxujil9#

带字体Awesome 6图标的 Bootstrap 5

我已将StartBootstrap's模板更改为使用Bootstrap 5和Vanilla JS
https://github.com/VFDouglas/reusable-codes/tree/main/bootstrap-header-sidebar

'use strict';

// Configura tooltips para navegação lateral oculta
document.querySelectorAll('.navbar-sidenav [data-toggle="tooltip"]').forEach(element => {
    let tooltip = new bootstrap.Tooltip(element, {template: '<div class="tooltip navbar-sidenav-tooltip" role="tooltip" style="pointer-events: none;"><div class="arrow"></div><div class="tooltip-inner"></div></div>'});
});

// Alterna a navegação lateral
document.getElementById('sidenavToggler').addEventListener('click', function(event) {
    event.preventDefault();
    document.body.classList.toggle('sidenav-toggled');
    document.querySelectorAll('.navbar-sidenav .nav-link-collapse').forEach(element => {
        element.classList.add('collapsed');
    });
    document.querySelectorAll('.navbar-sidenav .sidenav-second-level, .navbar-sidenav .sidenav-third-level').forEach(element => {
        element.classList.remove('show');
    });
})

// Força a classe habilitada a ser removida quando o link for clicado
document.querySelectorAll('.navbar-sidenav .nav-link-collapse').forEach(element => {
    element.addEventListener('click', function(event) {
        event.preventDefault();
        document.body.classList.remove('sidenav-toggled');
    });
});

// Previne a rolagem do conteúdo quando o mouse está sobre a barra de navegação lateral
document.querySelectorAll('body.fixed-nav .navbar-sidenav, body.fixed-nav .sidenav-toggler, body.fixed-nav .navbar-collapse').forEach(element => {
    element.addEventListener('wheel', function(event) {
        let delta = event.wheelDelta || -event.detail;
        this.scrollTop += (delta < 0 ? 1 : -1) * 30;
        event.preventDefault();
    });
});

// Aparecimento do botão de rolagem para o topo
window.addEventListener('scroll', function(event) {
    let scroll_distance = this.scrollY;
    let back_to_top     = document.querySelector('.back_to_top');

    if (scroll_distance > 100) {
        back_to_top.classList.remove('hide');
    }
    else {
        back_to_top.classList.add('hide');
    }
});

document.getElementById('toggleNavPosition').addEventListener('click', function() {
    document.body.classList.toggle('fixed-nav');
    document.querySelector('nav').classList.toggle('fixed-top');
    document.querySelector('nav').classList.toggle('static-top');
});
document.getElementById('toggleNavColor').addEventListener('click', function() {
    document.querySelector('nav').classList.toggle('navbar-dark');
    document.querySelector('nav').classList.toggle('navbar-light');

    document.querySelector('nav').classList.toggle('bg-dark');
    document.querySelector('nav').classList.toggle('bg-light');

    document.body.classList.toggle('bg-dark');
    document.body.classList.toggle('bg-light');
});

// Habilitando todos os tooltips
let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function(tooltip_trigger_element) {
    return new bootstrap.Tooltip(tooltip_trigger_element);
});
html {
    position: relative;
    min-height: 100%;
}

body {
    overflow-x: hidden;
}

body.sticky-footer {
    margin-bottom: 56px;
}

body.sticky-footer .content-wrapper {
    min-height: calc(100vh - 56px - 56px);
}

body.fixed-nav {
    padding-top: 56px;
}

.content-wrapper {
    min-height: calc(100vh - 56px);
    padding-top: 1rem;
}

.scroll-to-top {
    position: fixed;
    right: 15px;
    bottom: 3px;
    display: none;
    width: 50px;
    height: 50px;
    text-align: center;
    color: white;
    background: rgba(52, 58, 64, 0.5);
    line-height: 45px;
}

.scroll-to-top:focus, .scroll-to-top:hover {
    color: white;
}

.scroll-to-top:hover {
    background: #343a40;
}

.scroll-to-top i {
    font-weight: 800;
}

.smaller {
    font-size: 0.7rem;
}

.o-hidden {
    overflow: hidden !important;
}

.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

#mainNav .navbar-collapse {
    overflow: auto;
    max-height: 75vh;
}

#mainNav .navbar-collapse .navbar-nav .nav-item .nav-link {
    cursor: pointer;
}

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
    float: right;
    content: '\f107';
    font-family: 'FontAwesome';
}

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse.collapsed:after {
    content: '\f105';
}

#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level,
#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level {
    padding-left: 0;
}

#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a,
#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a {
    display: block;
    padding: 0.5em 0;
}

#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a:focus, #mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a:hover,
#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a:focus,
#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a:hover {
    text-decoration: none;
}

#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a {
    padding-left: 1em;
}

#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a {
    padding-left: 2em;
}

#mainNav .navbar-collapse .sidenav-toggler {
    display: none;
}

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link {
    position: relative;
    min-width: 45px;
}

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after {
    float: right;
    width: auto;
    content: '\f105';
    border: none;
    font-family: 'FontAwesome';
}

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link .indicator {
    position: absolute;
    top: 5px;
    left: 21px;
    font-size: 10px;
}

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown.show > .nav-link:after {
    content: '\f107';
}

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown .dropdown-menu > .dropdown-item > .dropdown-message {
    overflow: hidden;
    max-width: none;
    text-overflow: ellipsis;
}

@media (min-width: 992px) {
    #mainNav .navbar-brand {
        width: 250px;
    }

    #mainNav .navbar-collapse {
        overflow: visible;
        max-height: none;
    }

    #mainNav .navbar-collapse .navbar-sidenav {
        position: absolute;
        top: 0;
        left: 0;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 56px;
    }

    #mainNav .navbar-collapse .navbar-sidenav > .nav-item {
        width: 250px;
        padding: 0;
    }

    #mainNav .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
        padding: 1em;
    }

    #mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level,
    #mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level {
        padding-left: 0;
        list-style: none;
    }

    #mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li,
    #mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li {
        width: 250px;
    }

    #mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a,
    #mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a {
        padding: 1em;
    }

    #mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a {
        padding-left: 2.75em;
    }

    #mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a {
        padding-left: 3.75em;
    }

    #mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link {
        min-width: 0;
    }

    #mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after {
        width: 24px;
        text-align: center;
    }

    #mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown .dropdown-menu > .dropdown-item > .dropdown-message {
        max-width: 300px;
    }
}

#mainNav.fixed-top .sidenav-toggler {
    display: none;
}

@media (min-width: 992px) {
    #mainNav.fixed-top .navbar-sidenav {
        height: calc(100vh - 112px);
    }

    #mainNav.fixed-top .sidenav-toggler {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: calc(100vh - 56px);
    }

    #mainNav.fixed-top .sidenav-toggler > .nav-item {
        width: 250px;
        padding: 0;
    }

    #mainNav.fixed-top .sidenav-toggler > .nav-item > .nav-link {
        padding: 1em;
    }
}

#mainNav.fixed-top.navbar-dark .sidenav-toggler {
    background-color: #212529;
}

#mainNav.fixed-top.navbar-dark .sidenav-toggler a i {
    color: #adb5bd;
}

#mainNav.fixed-top.navbar-light .sidenav-toggler {
    background-color: #dee2e6;
}

#mainNav.fixed-top.navbar-light .sidenav-toggler a i {
    color: rgba(0, 0, 0, 0.5);
}

body.sidenav-toggled #mainNav.fixed-top .sidenav-toggler {
    overflow-x: hidden;
    width: 55px;
}

body.sidenav-toggled #mainNav.fixed-top .sidenav-toggler .nav-item,
body.sidenav-toggled #mainNav.fixed-top .sidenav-toggler .nav-link {
    width: 55px !important;
}

body.sidenav-toggled #mainNav.fixed-top #sidenavToggler i {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: 'FlipH';
}

#mainNav.static-top .sidenav-toggler {
    display: none;
}

@media (min-width: 992px) {
    #mainNav.static-top .sidenav-toggler {
        display: flex;
    }
}

body.sidenav-toggled #mainNav.static-top #sidenavToggler i {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: 'FlipH';
}

.content-wrapper {
    overflow-x: hidden;
    background: white;
}

@media (min-width: 992px) {
    .content-wrapper {
        margin-left: 250px;
    }
}

#sidenavToggler i {
    font-weight: 800;
}

.navbar-sidenav-tooltip.show {
    display: none;
}

@media (min-width: 992px) {
    body.sidenav-toggled .content-wrapper {
        margin-left: 55px;
    }
}

body.sidenav-toggled .navbar-sidenav {
    width: 55px;
}

body.sidenav-toggled .navbar-sidenav .nav-link-text {
    display: none;
}

body.sidenav-toggled .navbar-sidenav .nav-item,
body.sidenav-toggled .navbar-sidenav .nav-link {
    width: 55px !important;
}

body.sidenav-toggled .navbar-sidenav .nav-item:after,
body.sidenav-toggled .navbar-sidenav .nav-link:after {
    display: none;
}

body.sidenav-toggled .navbar-sidenav .nav-item {
    white-space: nowrap;
}

body.sidenav-toggled .navbar-sidenav-tooltip.show {
    display: flex;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
    color: #868e96;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
    color: #868e96;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link:hover {
    color: #adb5bd;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a {
    color: #868e96;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:focus, #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:hover,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:focus,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:hover {
    color: #adb5bd;
}

#mainNav.navbar-dark .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after {
    color: #adb5bd;
}

@media (min-width: 992px) {
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav {
        background: #343a40;
    }

    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a {
        color: white !important;
        background-color: #495057;
    }

    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a:focus, #mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a:hover {
        color: white;
    }

    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level,
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level {
        background: #343a40;
    }
}

#mainNav.navbar-light .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
    color: rgba(0, 0, 0, 0.5);
}

#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
    color: rgba(0, 0, 0, 0.5);
}

#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item > .nav-link:hover {
    color: rgba(0, 0, 0, 0.7);
}

#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a,
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a {
    color: rgba(0, 0, 0, 0.5);
}

#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:focus, #mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:hover,
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:focus,
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:hover {
    color: rgba(0, 0, 0, 0.7);
}

#mainNav.navbar-light .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after {
    color: rgba(0, 0, 0, 0.5);
}

@media (min-width: 992px) {
    #mainNav.navbar-light .navbar-collapse .navbar-sidenav {
        background: #f8f9fa;
    }

    #mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active a {
        color: #000 !important;
        background-color: #e9ecef;
    }

    #mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active a:focus, #mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active a:hover {
        color: #000;
    }

    #mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level,
    #mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level {
        background: #f8f9fa;
    }
}

.card-body-icon {
    position: absolute;
    z-index: 0;
    top: -25px;
    right: -25px;
    font-size: 5rem;
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
}

@media (min-width: 576px) {
    .card-columns {
        column-count: 1;
    }
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 2;
    }
}

@media (min-width: 1200px) {
    .card-columns {
        column-count: 2;
    }
}

.card-login {
    max-width: 25rem;
}

.card-register {
    max-width: 40rem;
}

footer.sticky-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 56px;
    background-color: #e9ecef;
    line-height: 55px;
}

@media (min-width: 992px) {
    footer.sticky-footer {
        width: calc(100% - 250px);
    }
}

@media (min-width: 992px) {
    body.sidenav-toggled footer.sticky-footer {
        width: calc(100% - 55px);
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>SB Admin - Start Bootstrap Template</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
        <script src="https://kit.fontawesome.com/cff50367d9.js" crossorigin="anonymous"></script>
    </head>
    <body class="fixed-nav sticky-footer bg-dark" id="page-top">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top pb-2 pt-2 px-3" id="mainNav">
            <a class="navbar-brand" href="#">Start Bootstrap</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
                    <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
                        <a class="nav-link" href="#">
                            <i class="fa fa-fw fa-dashboard"></i>
                            <span class="nav-link-text">Dashboard</span>
                        </a>
                    </li>
                    <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Components">
                        <a class="nav-link nav-link-collapse collapsed" data-bs-toggle="collapse" href="#collapseComponents" data-parent="#exampleAccordion">
                            <i class="fa fa-fw fa-wrench"></i>
                            <span class="nav-link-text">Components</span>
                        </a>
                        <ul class="sidenav-second-level collapse" id="collapseComponents">
                            <li>
                                <a href="#">Navbar</a>
                            </li>
                            <li>
                                <a href="#">Cards</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Example Pages">
                        <a class="nav-link nav-link-collapse collapsed" data-bs-toggle="collapse" href="#collapseExamplePages" data-parent="#exampleAccordion">
                            <i class="fa fa-fw fa-file"></i>
                            <span class="nav-link-text">Example Pages</span>
                        </a>
                        <ul class="sidenav-second-level collapse" id="collapseExamplePages">
                            <li>
                                <a href="#">Login Page</a>
                            </li>
                            <li>
                                <a href="#">Registration Page</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Menu Levels">
                        <a class="nav-link nav-link-collapse collapsed" data-bs-toggle="collapse" href="#collapseMulti" data-parent="#exampleAccordion">
                            <i class="fa fa-fw fa-sitemap"></i>
                            <span class="nav-link-text">Menu Levels</span>
                        </a>
                        <ul class="sidenav-second-level collapse" id="collapseMulti">
                            <li>
                                <a href="#">Second Level Item</a>
                            </li>
                            <li>
                                <a class="nav-link-collapse collapsed" data-bs-toggle="collapse" href="#collapseMulti2">Third Level</a>
                                <ul class="sidenav-third-level collapse" id="collapseMulti2">
                                    <li>
                                        <a href="#">Third Level Item</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item" data-toggle="tooltip" data-bs-placement="right" title="Link">
                        <a class="nav-link" href="#">
                            <i class="fa fa-fw fa-link"></i>
                            <span class="nav-link-text">Link</span>
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav sidenav-toggler">
                    <li class="nav-item">
                        <a class="nav-link text-center" id="sidenavToggler">
                            <i class="fa fa-fw fa-angle-left"></i>
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle me-lg-2" id="messagesDropdown" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-fw fa-envelope"></i>
                            <span class="d-lg-none">Messages
                                <span class="badge badge-pill bg-primary text-dark">12 New</span>
                            </span>
                            <span class="indicator text-primary d-none d-lg-block">
                                <i class="fa fa-fw fa-circle"></i>
                            </span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="messagesDropdown">
                            <h6 class="dropdown-header">New Messages:</h6>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">
                                <strong>David</strong>
                                <span class="small float-end text-muted">11:21 AM</span>
                                <div class="dropdown-message small">Hey there!</div>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item small" href="#">View all messages</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle me-lg-2" id="alertsDropdown" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-fw fa-bell"></i>
                            <span class="d-lg-none">Alerts
                                <span class="badge badge-pill bg-warning text-dark">6 New</span>
                            </span>
                            <span class="indicator text-warning d-none d-lg-block">
                                <i class="fa fa-fw fa-circle"></i>
                            </span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="alertsDropdown">
                            <h6 class="dropdown-header">New Alerts:</h6>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">
                                <span class="text-success">
                                    <strong>
                                        <i class="fa fa-long-arrow-up fa-fw"></i>
                                        Status Update
                                    </strong>
                                </span>
                                <span class="small float-end text-muted">11:21 AM</span>
                                <div class="dropdown-message small">This is an automated server response message.</div>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">
                                <span class="text-danger">
                                    <strong><i class="fa fa-long-arrow-down fa-fw"></i>Status Update</strong>
                                </span>
                                <span class="small float-end text-muted">11:21 AM</span>
                                <div class="dropdown-message small">This is an automated server response message.</div>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">
                                <span class="text-success">
                                    <strong><i class="fa fa-long-arrow-up fa-fw"></i>Status Update</strong>
                                </span>
                                <span class="small float-end text-muted">11:21 AM</span>
                                <div class="dropdown-message small">This is an automated server response message.</div>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item small" href="#">View all alerts</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle me-lg-2" id="alertsDropdown" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-fw fa-bell"></i>
                            <span class="d-lg-none">Alerts
                                <span class="badge badge-pill bg-warning text-dark">6 New</span>
                            </span>
                            <span class="indicator text-warning d-none d-lg-block">
                                <i class="fa fa-fw fa-circle"></i>
                            </span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="alertsDropdown">
                            <h6 class="dropdown-header">New Alerts:</h6>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">
                                <span class="text-success">
                                    <strong>
                                        <i class="fa fa-long-arrow-up fa-fw"></i>
                                        Status Update
                                    </strong>
                                </span>
                                <span class="small float-end text-muted">11:21 AM</span>
                                <div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">
                                <span class="text-danger">
                                    <strong><i class="fa fa-long-arrow-down fa-fw"></i>Status Update</strong>
                                </span>
                                <span class="small float-end text-muted">11:21 AM</span>
                                <div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">
                                <span class="text-success">
                                    <strong><i class="fa fa-long-arrow-up fa-fw"></i>Status Update</strong>
                                </span>
                                <span class="small float-end text-muted">11:21 AM</span>
                                <div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item small" href="#">View all alerts</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <form class="form-inline my-2 my-lg-0 mr-lg-2">
                            <div class="input-group">
                                <input class="form-control" type="text" placeholder="Search for...">
                                <span class="input-group-append">
                                    <button class="btn btn-primary" type="button">
                                      <i class="fa fa-search"></i>
                                    </button>
                                </span>
                            </div>
                        </form>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="modal" data-bs-target="#exampleModal">
                            <i class="fa fa-fw fa-sign-out"></i>Logout</a>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="content-wrapper">
            <div class="container-fluid">
                <!-- Breadcrumbs-->
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item active">Navbar</li>
                </ol>
                <h1>Navbar</h1>
                <hr>
                <p>The SB Admin navbar can be either fixed or static, and it supports the navbar-light and navbar-dark Bootstrap 5 classes.</p>
                <a class="btn btn-primary" href="#" id="toggleNavPosition">Toggle Fixed/Static Navbar</a>
                <a class="btn btn-primary" href="#" id="toggleNavColor">Toggle Navbar Color</a>
                <!-- Blank div to give the page height to preview the fixed vs. static navbar-->
                <div style="height: 1000px;"></div>
            </div>
            <!-- Scroll to Top Button -->
            <span class="back_to_top hide" data-toggle="tooltip" data-bs-placement="left" title="Clique para voltar ao topo da p&aacute;gina">
                <i class="fas fa-arrow-alt-circle-up fa-2x"></i>
            </span>
        </div>
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
                        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
                        <a class="btn btn-primary" href="#">Logout</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
赞(0）分享  回复(0）举报  2023-02-17
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com