Html 输入表单在奇怪的地方舍入的标签

发布于03月07日

我使用Bootstrap设置样式，并使用Bootstrap的输入表单类创建了此输入

但是，由于某些原因，在加载页面时，标签和输入空格之间会发生一些奇怪的舍入.

它可能与我使用Astro有关，并作为这一输入的一个组成部分，但仍然不知道.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">Zeitpunkt des Aufhörens</span>
    </div>
    <input type="date" class="form-control" aria-describedby="basic-addon1">
</div>

推荐答案

input-group-prepend类是Bootstrap 4类.第<div class="input-group-prepend">章问题就解决了

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container mt-3">
  <div class="input-group">
    <div class="input-group-text" id="basic-addon1">Zeitpunkt des Aufhörens</div>
    <input type="date" class="form-control" aria-describedby="basic-addon1">
  </div>
</div>

请注意，您可以在同一个输入组中使用input-group-text个元素，它们将相应地设置样式.你不需要任何额外的CSS或类.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container mt-3">
  <div class="input-group">
    <div class="input-group-text" id="basic-addon1">Zeitpunkt des Aufhörens</div>
    <div class="input-group-text">Second text</div>
    <input type="date" class="form-control" aria-describedby="basic-addon1">
    <div class="input-group-text">Third text</div>
  </div>
</div>

migration guide人对这一变化有一个注释.