如何拉伸 h1 容器以匹配父 div 的 100% 寬度

Question

這是帶有父母和孩子以及當前樣式的代碼示例

 main #main-content-wrapper div { padding: 0; margin: 0; } img { border-radius: 8px; }.overlay1 { position: absolute; top: 0; right: .1px; bottom: 399px; height: 100%; width: 100%; opacity: 0; transition: all.5s ease-in-out; background-color: #088508; }.overlay2 { position: absolute; top: 0; right: .1px; bottom: 399px; height: 100%; width: 100%; opacity: 0; transition: all.5s ease-in-out; background-color: #088508; }.overlay3 { position: absolute; top: 0; right: .1px; bottom: 399px; height: 100%; width: 100%; opacity: 0; transition: all.5s ease-in-out; background-color: #088508; }.jadePackage1:hover.overlay1 { opacity: 1; background: rgba(8, 133, 8, 0.53); }.rubyPackage1:hover.overlay2 { opacity: 1; background: rgba(100, 43, 46, 0.53); }.sapphirePackage1:hover.overlay3 { opacity: 1; background: rgba(0, 0, 255, 0.43); }.text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }.jadePackage1 { background-image: url("https://placekitten.com/400/300"); background-size: cover; height: 400px; width: 300px; } ul { width: 370px; } ul li { font-size: 17px; text-align: left; /*border: 1px dotted black;*/ } ul.colorOptions { list-style-type: decimal; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <main id="main-content-wrapper"> <div class="container-fluid" id="travelPackages"> <div class="row"> <div class="col-12 col-md-6 col-lg-3 jadePackage1" style="margin-right: 30px; margin-left: 200px; border: 1px solid black;"> <h1 style="font-size: 20px; background-color: white;display: flex; justify-content: center; margin: auto; padding: 0 100px 0 100px; ">The Jade Package <span>$19.99</span></h1> </div> </div> </div> </main>

我試圖讓 header 讀取“The Jade”覆蓋照片頂部的 100%，這樣它看起來就像在照片頂部的 header，而不是放在照片中間。

我玩過不同的顯示裝置和寬度，但這是我能得到的最大的，接近但不完全在那里。

Answer 1

You have a bit of a mess in inline and css styles, so I suggest you to move all styles to css and reorganize it, then you'll have less troubles when you try to add any new style.

至於您的問題， h1已經占用了可用寬度的 100%，但由於包裝器的填充而停止。 您需要刪除包裝容器（ .jadePackage1 ）中的填充，它會起作用 - 我添加了 inline padding: 0 。 請參閱附加的片段。

 main #main-content-wrapper div { padding: 0; margin: 0; } img { border-radius: 8px; }.overlay1 { position: absolute; top: 0; right: .1px; bottom: 399px; height: 100%; width: 100%; opacity: 0; transition: all.5s ease-in-out; background-color: #088508; }.overlay2 { position: absolute; top: 0; right: .1px; bottom: 399px; height: 100%; width: 100%; opacity: 0; transition: all.5s ease-in-out; background-color: #088508; }.overlay3 { position: absolute; top: 0; right: .1px; bottom: 399px; height: 100%; width: 100%; opacity: 0; transition: all.5s ease-in-out; background-color: #088508; }.jadePackage1:hover.overlay1 { opacity: 1; background: rgba(8, 133, 8, 0.53); }.rubyPackage1:hover.overlay2 { opacity: 1; background: rgba(100, 43, 46, 0.53); }.sapphirePackage1:hover.overlay3 { opacity: 1; background: rgba(0, 0, 255, 0.43); }.text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }.jadePackage1 { background-image: url("https://placekitten.com/400/300"); background-size: cover; height: 400px; width: 300px; } ul { width: 370px; } ul li { font-size: 17px; text-align: left; /*border: 1px dotted black;*/ } ul.colorOptions { list-style-type: decimal; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <main id="main-content-wrapper"> <div class="container-fluid" id="travelPackages"> <div class="row"> <div class="col-12 col-md-6 col-lg-3 jadePackage1" style="margin-right: 30px; margin-left: 200px; border: 1px solid black; padding: 0"> <h1 style="font-size: 20px; background-color: white;display: flex; justify-content: center; padding: 0 100px 0 100px; ">The Jade Package <span>$19.99</span></h1> </div> </div> </div> </main>

Answer 2

使用 Bootstrap 的網格（容器、行和列）幾乎總是一個壞主意。 不要在它們上面放置自定義邊距和填充。 絕對不要使用特定的寬度。 那只會破壞一切。 停止使用內聯 styles，即使用於開發。 如果您需要進行實驗，請在瀏覽器檢查器中進行，然后將其放在自定義 class 上。

我可能會創建一個自定義 class 並將該列的內容拉出列填充。 不理會網格。

 .jadePackage1 { background-image: url("https://placekitten.com/400/300"); background-size: cover; border: 1px solid black; min-height: 150px; } h1 { font-size: 20px; background-color: white; display: flex; justify-content: center; margin: auto; padding: 0 100px 0 100px; }.w-100-in-col { margin-left: -12px; margin-right: -12px; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <main id="main-content-wrapper"> <div class="container-fluid" id="travelPackages"> <div class="row"> <div class="col-12 col-md-6 col-lg-3 jadePackage1"> <h1 class="w-100-in-col">The Jade Package <span>$19.99</span></h1> </div> </div> </div> </main>

我現在最好的建議是盡可能多地去掉與 Bootstrap 元素相關的樣式。 使用庫，而不是反對它，除非沒有其他方法，否則只設置網格內容的樣式。

Answer 3

您可以添加 tis 規則....

.row > .jadePackage1 {
  padding: 0;
}

...重置引導程序應用到該 h1 的父容器的默認填充。

 main #main-content-wrapper div { padding: 0; margin: 0; } img { border-radius: 8px; }.overlay1 { position: absolute; top: 0; right: .1px; bottom: 399px; height: 100%; width: 100%; opacity: 0; transition: all.5s ease-in-out; background-color: #088508; }.overlay2 { position: absolute; top: 0; right: .1px; bottom: 399px; height: 100%; width: 100%; opacity: 0; transition: all.5s ease-in-out; background-color: #088508; }.overlay3 { position: absolute; top: 0; right: .1px; bottom: 399px; height: 100%; width: 100%; opacity: 0; transition: all.5s ease-in-out; background-color: #088508; }.jadePackage1:hover.overlay1 { opacity: 1; background: rgba(8, 133, 8, 0.53); }.rubyPackage1:hover.overlay2 { opacity: 1; background: rgba(100, 43, 46, 0.53); }.sapphirePackage1:hover.overlay3 { opacity: 1; background: rgba(0, 0, 255, 0.43); }.text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }.jadePackage1 { background-image: url("https://placekitten.com/400/300"); background-size: cover; height: 400px; width: 300px; } ul { width: 370px; } ul li { font-size: 17px; text-align: left; /*border: 1px dotted black;*/ } ul.colorOptions { list-style-type: decimal; }.row >.jadePackage1 { padding: 0; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <main id="main-content-wrapper"> <div class="container-fluid" id="travelPackages"> <div class="row"> <div class="col-12 col-md-6 col-lg-3 jadePackage1" style="margin-right: 30px; margin-left: 200px; border: 1px solid black;"> <h1 style="font-size: 20px; background-color: white;display: flex; justify-content: center; margin: auto; padding: 0 100px 0 100px;">The Jade Package <span>$19.99</span></h1> </div> </div> </div> </main>