我有這個代碼 https://jsfiddle.net/kxrmcpzn/
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Landing Page</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<style type="text/css" media="screen">
.flex-even {
flex: 1;
}
.hero,
.navbar {
background-color: #1f2937;
color: #f9faf8;
}
</style>
<body>
<div class="container">
<div class="navbar">
<div class="logo">Header Logo</div>
<div class="navbar-items">
<a href="#">header link one</a>
<a href="#">header link two</a>
<a href="#">header link three</a>
</div>
</div>
<div class="hero d-flex">
<div class="flex-even">
<h1>This website is awesome</h1>
<p>
This website has some subtext that goes here under the main title.
It's a smaller font and the color is lower contrast
</p>
<button class="btn btn-primary">Sign up</button>
</div>
<div class="flex-even">
<img src="https://via.placeholder.com/350x150" />
</div>
</div>
<div>
<h2 class="fw-bold text-center">Some random information</h2>
<div class="d-flex">
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
</div>
</div>
<div>
<p>
This is an inspiring quote, or a testimonial from a customer. Maybe
it's just filling up space, or maybe people will actually read it. Who
knows? All I know is that it looks nice.
</p>
<p class="fw-bold">-Thor, God of Thunder</p>
</div>
<div class="d-flex bg-primary text-white p-3 rounded">
<div>
<p class="fw-bold">Call to action! It's time!</p>
<p>
Sign up for our product by clicking that button right over there
</p>
</div>
<div>
<button class="btn btn-light">Sign up</button>
</div>
</div>
</div>
</body>
</html>
我希望外部 div 內每個元素的寬度是整頁寬度 100%，像這樣 https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/project/odin-project.png
我嘗試使用類 container-fluid 但文本不會在容器內
uj5u.com熱心網友回復：
您可以結合容器流體和容器：
<div class="container-fluid navbar">
<div class="container">
...
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/473114.html