我已經為整個頁面指定了背景圖片。最重要的是，我想要一個帶有純色背景的標題，左側是我的徽標，中間是公司名稱，右側是我的名字。
在此之下，我想為我的網站的主頁設定 3 列，如果可能的話，每列都可能有自己的背景顏色。
我正在嘗試使用引導程式為我的標題提供三個部分（徽標文本名稱），并且我希望文本居中。
我有這么多填充的原因是徽標一直掛在標題的底部。
現在我確定我做錯了很多，但如果有人能幫助我，我將永遠感激不盡。謝謝。
body {
background-image: url(images/bg.jpg);
}
header {
background-color: #539e8a;
padding: 20px 10px 30px 10px;
color: #f6c5be;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#logo {
width: 160px;
height: 140px;
float: left;
}<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-xs-2">
<img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo">
</div>
<div class="col-xs-8">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="col-xs-2">
<p>my name</p>
</div>
</div>
</div>
</header>
<div class="container">
<div id="main" class="row">
<div id="col1" class="col-sm-4">
<h2> col 1 </h2>
</div>
<div id="col2" class="col-sm-4">
<h2> col 2 </h2>
</div>
<div id="col3" class="col-sm-4">
<h2> col 3 </h2>
</div>
</div>
</div>
</body>uj5u.com熱心網友回復：
Bootstrap 5 確實將flexbox帶到了桌面上，所以我會使用它而不是與列摔跤，由于不靈活，這可能會很麻煩。
在這里，我用一個簡單的 flex 行替換了您的容器、行和列。交叉軸上的專案對齊使事物居中。中心元素上有 Bootstrap 的flex-fill類以使其伸展。
另請注意，我已經用 Bootstrap 間距類替換了您的自定義邊距和填充以清理內容。
body {
background-image: url(https://via.placeholder.com/1200);
}
header {
background-color: #539e8a;
color: #f6c5be;
border-radius: 25px;
}
#logo {
width: 160px;
height: 140px;
}<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header class="mt-3">
<div class="d-flex align-items-center">
<img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo" class="logo m-3">
<div class="flex-fill text-center">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="px-3">
<p>My Name</p>
</div>
</div>
</header>
<div class="container">
<div id="main" class="row">
<div id="col1" class="col-sm-4">
<h2> col 1 </h2>
</div>
<div id="col2" class="col-sm-4">
<h2> col 2 </h2>
</div>
<div id="col3" class="col-sm-4">
<h2> col 3 </h2>
</div>
</div>
</div>
</body>uj5u.com熱心網友回復：
我對您的代碼進行了一些更改并添加了一些內容，因此希望對您有所幫助！
body {
background-image: url(images/bg.jpg);
}
header {
background-color: #539e8a;
padding: 20px 10px 0px 0px;
color: #f6c5be;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#logo {
width: 160px;
height: 140px;
}
#top-part-1 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.col-xs-2 {
display: flex;
flex-direction: column;
justify-content: center;
}
.col-xs-8 {
display: flex;
flex-direction: column;
justify-content: center;
}
.header-2 {
padding: 20px 10px 0px 0px;
color: #000000;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#top-part-2 {
display: flex;
flex-direction: row;
justify-content: space-between;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<header>
<div class="container" id="top-part-1">
<div class="col-xs-2">
<img id="logo" src="images/logo.png" alt="cakes 'n' bakes logo">
</div>
<div class="col-xs-8">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="col-xs-2">
<p>my name</p>
</div>
</div>
</header>
<div class="header-2">
<div class="container" id="top-part-2">
<div class="col-xs-2">
<h2> col 1 </h2>
</div>
<div class="col-xs-8">
<h2> col 2 </h2>
</div>
<div class="col-xs-2">
<h2> col 3 </h2>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429615.html