html - 放大时页脚卡在页面中间| 引导程序 4
问题描述
我刚开始用 HTML 和 CSS 学习 Bootstrap。使用引导网格系统，我创建了 3 个这样 的部分。只要您使用 >= 中等屏幕，一切都很好。使用一个小屏幕（或者您只是放大）时会出现问题，内容更大并且高度更长。页脚像这样在屏幕中间结束。
我试过了：
- 设置身高 100%
- 清除两者
- 职位：绝对；bottom:0
我认为原因来自菜单中的 div。放大时，内容拉伸但页脚无法识别
@import url('https://fonts.googleapis.com/css2?family=Warnes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500;700&display=swap');
html,body{
height: 100%;
width: 100%;
}
body{
margin: 0;
background-image: url(/images/nick-karvounis-Ciqxn7FE4vE-unsplash.jpg);
background-repeat: repeat-y;
background-size: cover;
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: 1.5rem;
}
/* Navbar Start */
#brandName{
font-family: 'Warnes', cursive;
color: #FF511C;
font-size: 2rem;
padding: 0.2rem 0.3rem 0.2rem 0.5rem;
margin-bottom: 0;
}
#header-navbar{
background-color: #414141;
}
.nav-link{
font-family: 'Work Sans';
text-decoration: none;
text-transform: uppercase;
color: white;
margin-left: 0.7rem;
font-size: 1.2rem;
margin-bottom: 0;
text-align: center;
}
.navbar-toggler:focus{
box-shadow:none !important;
}
.nav-link:hover{
color:lightcoral !important;
}
.navbar-toggler-icon{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 162, 134, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
button.navbar-toggler{
border: 2px solid #FFA286 !important;
color:rgba(243, 199, 199, 0.52) !important;
border-radius: 27px;
}
button.navbar-toggler:hover{
background-color: rgba(235, 193, 193, 0.52) !important;
}
@media (max-width: 767.98px) {
.nav-item{
background-color: rgb(94, 94, 94);
border:#212529 2px solid;}
}
/* Navbar End */
/* Body Start */
#headerMenu{
font-family: 'Work Sans';
text-transform: uppercase;
font-weight: 700 !important;
font-size: 4rem !important;
color: white;
border: 1px solid #000000;
text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.52);
border:none;
margin-top: 7rem;
}
#bgimg{
background: linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)), url(nick-karvounis-Ciqxn7FE4vE-unsplash.jpg);
filter: blur(1px);
object-fit: cover;
width: 100%;
height: 100%;
margin: 0 auto;
position: absolute;
}
.box{
background: #414141;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
color:white;
cursor: pointer;
}
.box:hover .menuhead{
color: lightcoral;
}
.contentMenu{
text-indent: 1.8rem;
}
/* Body End */
/* Footer start */
.footer_container{
margin-top: auto;
background-color:#212529;
color:white;
width: 100%;
height: 100%;
border: none;
}
.footer_main{
position: relative;
bottom: 0;
height:4rem;
}
/* Footer end */<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap style -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<!-- Font install -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<title>Restaurant</title>
</head>
<body>
<!-- NAVBAR START -->
<nav class="navbar fixed-top navbar-default navbar-expand-md justify-content-center align-items-center navbar-dark bg-dark p" id="header-navbar">
<div class="container-fluid">
<!-- brand navbar -->
<div class="navbar-brand d-flex me-lg-auto">
<p id="brandName">Food, LLC</p>
</div>
<!-- toogle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navlinks -->
<div class="collapse navbar-collapse" id="mainNav">
<ul id="nav-list" class="nav navbar-nav ms-auto my-md-0 my-2">
<li class="nav-item">
<a class="nav-link" href="#beefMenu">Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#chickenMenu">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sushiMenu">Sushi</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
<!-- OUR MENU Start -->
<div class="container w-100 h-100">
<p class="display-1 text-uppercase text-center " id="headerMenu">our menu</p>
<div class="row">
<!-- <div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead ">BEEF</h1>
<p class="px-1 pb-2 contentMenu" id="beefMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div>
<div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead">Chicken</h1>
<p class="px-1 pb-2 contentMenu" id="chickenMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div>
<div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead">sushi</h1>
<p class="px-1 pb-2 contentMenu" id="sushiMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div> -->
<div class="col-md-4 col-sm-6 col-12 ">
<div class="box"> <section>
<h1 class="text-center text-uppercase text-white pt-4 " >Beef</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section></div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4" >Chicken</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
<div class="col-md-4 col-sm-12 col-12">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4">sushi</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
</div>
</div>
<!-- OUR MENU End -->
<!-- FOOTER Start -->
<footer class="bg-dark text-center text-lg-start footer_main">
<!-- Copyright -->
<div class="text-center text-white p-3">
Image Credit: Nick Karvounis
</div>
<!-- Copyright -->
</footer>
<!-- FOOTER End -->
<!-- Js install -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>解决方案
干得好...
1.包装包含您的主要内容的div。因此，您的主要内容将停止与页脚重叠。
所以，改变这个...
<div class="container w-100 h-100">...</div>
...进入这个。
<div>
<div class="container w-100 h-100"></div>
</div>
2.改变高度container。这会将页脚放在页面底部。
因此，将其添加到您的 CSS 代码中。
.container {
height: auto !important;
}
3.你可以删除一些东西。
您可以从 HTML 中删除该类footer_main，因为它是不必要的。
您可以删除这部分 CSS，因为它是不必要的：
.footer_container{
margin-top: auto;
background-color:#212529;
color:white;
width: 100%;
height: 100%;
border: none;
}
.footer_main{
position: relative;
bottom: 0;
height:4rem;
}
请参阅下面的片段。
@import url('https://fonts.googleapis.com/css2?family=Warnes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500;700&display=swap');
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
background-image: url(/images/nick-karvounis-Ciqxn7FE4vE-unsplash.jpg);
background-repeat: repeat-y;
background-size: cover;
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: 1.5rem;
}
/* Navbar Start */
#brandName {
font-family: 'Warnes', cursive;
color: #FF511C;
font-size: 2rem;
padding: 0.2rem 0.3rem 0.2rem 0.5rem;
margin-bottom: 0;
}
#header-navbar {
background-color: #414141;
}
.nav-link {
font-family: 'Work Sans';
text-decoration: none;
text-transform: uppercase;
color: white;
margin-left: 0.7rem;
font-size: 1.2rem;
margin-bottom: 0;
text-align: center;
}
.navbar-toggler:focus {
box-shadow: none !important;
}
.nav-link:hover {
color: lightcoral !important;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 162, 134, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'") !important;
}
button.navbar-toggler {
border: 2px solid #FFA286 !important;
color: rgba(243, 199, 199, 0.52) !important;
border-radius: 27px;
}
button.navbar-toggler:hover {
background-color: rgba(235, 193, 193, 0.52) !important;
}
@media (max-width: 767.98px) {
.nav-item {
background-color: rgb(94, 94, 94);
border: #212529 2px solid;
}
}
/* Navbar End */
/* Body Start */
#headerMenu {
font-family: 'Work Sans';
text-transform: uppercase;
font-weight: 700 !important;
font-size: 4rem !important;
color: white;
border: 1px solid #000000;
text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.52);
border: none;
margin-top: 7rem;
}
#bgimg {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)), url(nick-karvounis-Ciqxn7FE4vE-unsplash.jpg);
filter: blur(1px);
object-fit: cover;
width: 100%;
height: 100%;
margin: 0 auto;
position: absolute;
}
.box {
background: #414141;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
color: white;
cursor: pointer;
}
.box:hover .menuhead {
color: lightcoral;
}
.contentMenu {
text-indent: 1.8rem;
}
/* Add this. */
.container {
height: auto !important;
}<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap style -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<!-- Font install -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<title>Restaurant</title>
</head>
<body>
<!-- NAVBAR START -->
<nav class="navbar fixed-top navbar-default navbar-expand-md justify-content-center align-items-center navbar-dark bg-dark p" id="header-navbar">
<div class="container-fluid">
<!-- brand navbar -->
<div class="navbar-brand d-flex me-lg-auto">
<p id="brandName">Food, LLC</p>
</div>
<!-- toogle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navlinks -->
<div class="collapse navbar-collapse" id="mainNav">
<ul id="nav-list" class="nav navbar-nav ms-auto my-md-0 my-2">
<li class="nav-item">
<a class="nav-link" href="#beefMenu">Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#chickenMenu">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sushiMenu">Sushi</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
<!-- OUR MENU Start -->
<div>
<div class="container w-100 h-100">
<p class="display-1 text-uppercase text-center " id="headerMenu">our menu</p>
<div class="row">
<!-- <div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead ">BEEF</h1>
<p class="px-1 pb-2 contentMenu" id="beefMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div>
<div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead">Chicken</h1>
<p class="px-1 pb-2 contentMenu" id="chickenMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div>
<div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead">sushi</h1>
<p class="px-1 pb-2 contentMenu" id="sushiMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div> -->
<div class="col-md-4 col-sm-6 col-12 ">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4 ">Beef</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi
tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed
viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi
cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4">Chicken</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi
tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed
viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi
cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
<div class="col-md-4 col-sm-12 col-12">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4">sushi</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi
tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed
viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi
cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- OUR MENU End -->
<!-- FOOTER Start -->
<footer class="bg-dark text-center text-lg-start">
<!-- Copyright -->
<div class="text-center text-white p-3">
Image Credit: Nick Karvounis
</div>
<!-- Copyright -->
</footer>
<!-- FOOTER End -->
<!-- Js install -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>推荐阅读
- javascript - 试图将我的 VS 代码连接到 github 但在第一次初始化时我收到此错误
- javascript - 尝试设置输入字段的值时 setAttribute 不起作用
- python - 在顺序特征选择器中使用 CatBoostRegressor 时出现自定义记录器错误
- python - Tensorflow 2 Keras 模型策略梯度网络返回的值超出了有效操作的范围
- command-line-interface - 如何从文件列表中查找和存储标题行
- opencv - OpenCV：尝试保存补丁时 imwrite 不起作用
- r - 有没有办法部分匹配文本/字符串并在 R 中返回它的完整值
- php - 为什么添加此脚本时 POST 方法不起作用？
- django - 返回 django 查询集中的第一个对象
- amazon-web-services - AWS DataSync 可以更新修改的文件吗？