我在我的專案中使用 Laravel Inertia Vue，并在我的依賴項中使用 bootstrap 5.2.2。
將 css 加載到標簽后，我想制作粘性頁腳。但我想知道為什么頁腳不粘在底部。
我已經嘗試找到解決方案，但在我將解決方案應用于我的代碼后它仍然不起作用。
我的刀片代碼：
<!DOCTYPE html>
<html class="h-100">
<head>
<meta charset="utf-8" />
<meta name="description" content="Website name" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
<link href="{{ asset('/css/offcanvas.css') }}" rel="stylesheet"/>
<script src="{{ mix('/js/app.js') }}" defer></script>
</head>
<body hljs-number">100">
@inertia
</body>
</html>
我的組件布局頁面：
<template>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
//Nav here
</nav>
</header>
<div class="nav-scroller bg-body shadow-sm">
<nav class="nav" aria-label="Secondary navigation">
<span class="nav-link">Silakan pilih menu:</span>
<Link class="nav-link" v-for="(menu, index) in menus" :key="index" :href="`/page/${menu.id}`">{{
menu.name
}} </Link>
</nav>
</div>
<main hljs-string">">
<div hljs-string">">
<slot />
</div>
</main>
<footer hljs-number">3 bg-light">
<div hljs-string">">
<span hljs-string">">Place sticky footer content here.</span>
</div>
</footer>
</template>
uj5u.com熱心網友回復：
從您獲得粘性頁腳代碼的示例中，有一個外部css檔案，頁腳從中獲得粘性。我已經復制了，我會粘貼在這里（行內 CSS）
將您的刀片代碼更改為：
<!DOCTYPE html>
<html class="h-100">
<head>
<meta charset="utf-8" />
<meta name="description" content="Website name" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
<link href="{{ asset('/css/offcanvas.css') }}" rel="stylesheet"/>
<script src="{{ mix('/js/app.js') }}" defer></script>
<style>
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
</style>
</head>
<body hljs-number">100">
@inertia
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/533662.html