Bootstrap div 高度问题-解网

问：

我希望警报的高度与输入字段的高度相同。我无法使用 bootstrap 做到这一点。

我尝试将 col-mb-4 放入警报类中，但高度对齐没有运气。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <div class="mb-3 row">
    <label for="inputCompanyName" class="col-form-label col-2">Company :</label>
    <div class="col-5">
      <input type="text" class="form-control" id="inputCompanyName" placeholder="" formControlName="companyName" />
    </div>

    <div class="col-4 alert alert-danger" role="alert" *ngIf="companyNameVal.errors?.['required'] && companyNameVal.touched">
      Company name is required!
    </div>
  </div>
</div>

HTML CSS twitter-bootstrap 引导-5

Col-mb 不是 bootstrap 网格类。Bootstrap 网格系统有四个类： xs（适用于手机 - 屏幕宽度小于 768px） sm（适用于平板电脑 - 屏幕宽度等于或大于 768px） md（适用于小型笔记本电脑 - 屏幕宽度等于或大于 992px） lg（适用于笔记本电脑和台式机 - 屏幕宽度等于或大于 1200px）

1赞 isherwood 10/21/2023

请注意我如何修改您的代码以提供您的问题的示例。请参阅如何提问并参观。

1赞 isherwood 10/21/2023

您要求调整其高度由其内容定义的元素，但您还没有说出您愿意更改的内容。是否要删除文本周围的空格？是否要截断文本？请修改以更清楚。

答：

0赞 Chintan Dhokai 10/20/2023 #1

根据您的需要选择填充物，或者p-2p-3px-3 py-2

<div class="mb-3 row">
  <label for="inputCompanyName" class="col-form-label col-sm-2"
    >Company :</label
  >
  <div class="col-md-5">
    <input
      type="text"
      class="form-control"
      id="inputCompanyName"
      placeholder=""
      formControlName="companyName"
    />
  </div>
  <div
    class="col-md-4 alert alert-danger p-2"
    role="alert"
    *ngIf="companyNameVal.errors?.['required'] && companyNameVal.touched"
  >
    Company name is required!
  </div>

0赞 isherwood 10/21/2023 #2

由于行是 flex 容器，因此可以使所有子元素全高。然后，您可以设置输入以使其全高。最后，从警报中删除边距，使其不会影响警报的高度。如果要保留该空间，请在行上使用填充。请注意，我还减少了警报上的垂直填充，以防这是您真正想要的。align-items-stretchh-100py-1

与填充物或其他固定尺寸的解决方案相比，这里的优势在于它是流动的。警报元素达到什么高度并不重要，输入将匹配。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <div class="mb-3 row align-items-stretch">
    <label for="inputCompanyName" class="col-form-label col-2">Company :</label>
    <div class="col-5">
      <input type="text" class="form-control h-100" id="inputCompanyName" placeholder="" formControlName="companyName" />
    </div>

    <div class="col-4 alert alert-danger mb-0 py-1" role="alert" *ngIf="companyNameVal.errors?.['required'] && companyNameVal.touched">
      Company name is required!
    </div>
  </div>
</div>

上一个：Bootstrap Modal有问题，但无法修复

下一个：在引导页面中替换 fontawesome 图标时 google-material-icons 的垂直对齐

Bootstrap div 高度问题

Bootstrap div height issue

评论