下面我有一個簡單的例子，我有一個 "容器"，里面有兩個 "行 "的div。 我想讓包含<h1>的第一個 "行 "保持在頂部，就像它默認的那樣。 我想讓包含3個特征 "col "的第二 "行 "定位在容器的底部。 我使用的是Bootstrap 4.6
在下面的例子中，我使用了 "mt-auto "工具，我本以為它能起作用，看來我做錯了。 我是否需要在CSS中指定一個 "位置"？是否有一些其他的CSS需要指定？作為參考，Bootstrap 4.6的間距檔案在這里。Bootstrap 4.6間隔實用檔案
我還嘗試了使用 "align-self-end "的flex方法，但似乎也沒有效果。 我是否需要在 "行 "或 "容器 "中添加 "d-flex"？作為參考，Bootstrap 4.6的flex檔案在這里。Bootstrap 4.6 Flex檔案
我嘗試了各種方法，也搜索了堆疊溢位，都沒能解決這個問題。如果能在這兩種方法中找到一種幫助，我將不勝感激。 謝謝你。
。.hero {
height: 400px;
background-color: #ccc;
}
.row {
border: 1px solid #999;
}< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="style sheet"/>/span>
<div class=" hero">
<div class="容器">
<div class=" row">
<div class="col">/span>
<h1> 頁面標題</h1>
</div>/span>
</div>/span>
<div class="row mt-auto">/span>
<div class="col">/span>
特征1
</div>/span>
<div class="col"/span>>
特征2
</div> 特征2
<div class="col"/span>>
特征3
</div>/span>
</div>/span>
</div>/span>
</div>/span>uj5u.com熱心網友回復：
你的.container沒有填滿垂直空間，它需要.h-100來匹配父級高度。然后添加.d-flex & .flex-column。
.hero {
height: 400px;
background-color: #ccc;
}
.row {
border: 1px solid #999;
}< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="styleheet" />
<div class=" hero">
<div class="容器h-100 d-flex-column">
<div class=" row">
<div class="col">/span>
<h1>頁面標題</h1>
</div>/span>
</div>/span>
<div class="row mt-auto">/span>
<div class="col">/span>
特征1
</div>/span>
<div class="col"/span>>
特征2
</div> 特征2
<div class="col"/span>>
特征3
</div>/span>
</div>/span>
</div>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/309210.html
標籤：
上一篇：在行上滾動的日期，多個鍵
下一篇：<p>我在兩個輸入欄位中都使用了同樣的技術，在我的占位符中使用了fontawesome圖示。在搜索的情況下，它作業得很好，但在位置的情況下，它不作業，我已經嘗試改變CDN鏈接，但它不作業。