时间戳

首页 > 解决方案 > 如何使按钮与 Bootstrap 5 中其他表单元素的高度匹配？

html - 如何使按钮与 Bootstrap 5 中其他表单元素的高度匹配？

问题描述

我试图使按钮与其他元素匹配相同的高度（要么使其更小以匹配它们，要么使其他元素更大并匹配按钮）。这是我使用的代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<form class="form-inline d-sm-flex pt-1 my-auto">
  <p class="align-middle text-light py-1">10 tokens. <br> something each. 10 max per txn</p>
  <div class="form-group mb-2 px-3">
    <select class="form-control form-control-lg py-2 px-5 form-control-dark text-center" style="background-color: black; color: white; border-color: rgba(255, 255, 255, 0.1);">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
    </select>
  </div>
  <button class="btn btn-dark btn-lg" style="background-color: rgba(0, 0, 0, 0.7); border-width: 1.7px; border-color: white;"><span class="px-4" id="mintBtn">make it</span></button>
  <form>

我真的被困住了，我们将不胜感激。我还在我的网站上添加了一张它目前的样子的图片。

例子

标签： htmlcssformatbootstrap-5

解决方案

在构建内联表单时，可以添加以下 CSS 规则：

form > * {
  height: 100%;
}

这样，所有子元素将具有相同的高度。在下面的代码段中，您可以看到结果。为了更好地查看，我已将黑色背景添加到您的表单中。

form {
  background-color: black;
}

form > * {
  height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<form class="form-inline d-sm-flex pt-1 my-auto">
  <p class="align-middle text-light py-1">10 tokens. <br> something each. 10 max per txn</p>
  <div class="form-group mb-2 px-3">
    <select class="form-control form-control-lg py-2 px-5 form-control-dark text-center" style="background-color: black; color: white; border-color: rgba(255, 255, 255, 0.1);">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
    </select>
  </div>
  <button class="btn btn-dark btn-lg" style="background-color: rgba(0, 0, 0, 0.7); border-width: 1.7px; border-color: white;"><span class="px-4" id="mintBtn">make it</span></button>
  <form>

推荐阅读