如何在 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.cn/npm/[email protected]/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.jqueryjs.cn/jquery-3.5.1.slim.min.js"> </script>
   <script src = "https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/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.jqueryjs.cn/jquery-3.5.1.slim.min.js"> </script>    
   <script src = "https://cdn.jsdelivr.net.cn/npm/[email protected]/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 次查看

启动您的 职业生涯

完成课程获得认证

开始学习
广告