資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 Bootstrap 中設定單列高度控制？
本文將學習如何在 Bootstrap 中設定單列高度控制。為了解決這個問題，我們首先使用 Bootstrap 類在網頁上建立兩列，然後在其中一列內使用一個 position: absolute 的 div 元素來控制 Bootstrap 中該列的高度。
現在讓我們透過在不同的程式碼示例中實現它來實際瞭解上述方法或過程的細節。
步驟
步驟 1 − 在第一步中，我們將使用 Bootstrap 類在行內定義兩列不同的 Bootstrap 列。
步驟 2 − 在下一步中，我們將為其中一列分配position: relative 屬性，以便我們可以向該特定列新增一個position: absolute 的 div 並控制該列的高度。
步驟 3 − 在最後一步中，我們將文字插入到螢幕上可見的列中。
示例
以下示例將說明如何在 Bootstrap 中設定單列高度控制：
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet">
<style>
.column1-bg{
background-color: bisque;
}
.column2-bg{
background-color: aqua;
}
</style>
</head>
<body>
<div class = "container">
<h1 class = "display-6"> How to set one column control over height in Bootstrap ? </h1>
<p class = "lead"> The second columns in the below row has the control over the height. </p>
<div class = "row">
<div class = "col-8 column1-bg">
<p> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
<p> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more. </p>
</div>
<div class = "col-4 column2-bg overflow-auto position-relative">
<div class = "position-absolute">
<p> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
<p> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more. </p>
</div>
</div>
</div>
</div>
<!-- bootstrap JavaScript cdn -->
<script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
在上面的示例中，我們使用 Bootstrap 類實現了在 Bootstrap 中設定單列高度控制的方法或解決方案。在這個示例中，高度控制被賦予了行的第二列。
讓我們再看一個程式碼示例，其中高度控制被賦予第一列。
演算法
此示例的演算法與上述示例非常相似。您只需要互換兩列的 HTML 程式碼即可更改列控制，如下例所示。
示例
以下示例將解釋如何將高度控制賦予行中的第一列：
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet" >
<style>
.column1-bg{
background-color: bisque;
}
.column2-bg{
background-color: aqua;
}
</style>
</head>
<body>
<div class = "container">
<h1 class = "display-6"> How to set one column control over height in Bootstrap ? </h1>
<p class = "lead"> The second columns in the below row has the control over the height. </p>
<div class = "row">
<div class = "col-4 column1-bg overflow-auto position-relative">
<div class = "position-absolute">
<p> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
<p> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more. </p>
</div>
</div>
<div class = "col-8 column2-bg">
<p> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
<p> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more. </p>
</div>
</div>
</div>
<!-- bootstrap JavaScript cdn -->
<script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
在此示例中，我們使用相同的邏輯將高度控制賦予第一列而不是第二列。
結論
在本文中，我們學習瞭如何透過兩個不同的程式碼示例來幫助我們瞭解如何將高度控制賦予 Bootstrap 中的特定列，從而瞭解我們對問題的實際方法。
更新於：2023年11月20日
51 次檢視
廣告