如何解决如何在Bootstrap 4的表单行类中垂直对齐按钮
在将标签与按钮相关联时,我无法使一组行的按钮保持一致。分配给列宽度(例如col-3)的按钮的行为与分配给自动宽度col-auto的按钮的行为不同。
目标是使所有按钮与按钮上方的文本标签垂直对齐。视口大小更改时,文本标签应跟随按钮的位置。我尝试使用.align-self-baseline似乎没有效果。
如果我在按钮上方添加带有自动调整大小列的空白标签,则会将文本放置在按钮左侧而不是按钮上方。当目标应用程序在显示端口宽度受限的移动设备上显示时,标签需要显示在按钮上方。以下是这两个的摘要:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<form action="#">
<div class="form-row">
<div class="col-4 text-center">
<label>Desired</label>
<button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Button Name</button>
</div>
<div class="col-auto text-center">
<label>undesired</label>
<button type="submit" class="btn btn-sm btn-outline-primary active" aria-pressed="true">Button 2</button>
</div>
</div> <!-- row -->
<div class="form-row mt-4">
<div class="col-4 text-center">
<label>Desired</label>
<button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Row 2 Button</button>
</div>
<div class="col-auto text-center">
<button type="submit" class="btn btn-sm btn-outline-primary align-self-baseline active" aria-pressed="true">Not aligned with Row 2 Button</button>
</div>
</div> <!-- row -->
</form>
</div>
解决方法
该键位于btn-block
类中-它为display:block
类的div内的按钮提供了col-4
属性-如果将其删除,对齐方式将相似
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<form action="#">
<div class="form-row">
<div class="col-4 text-center">
<label>Desired</label>
<button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Button Name</button>
</div>
<div class="col-auto text-center">
<label>undesired</label>
<button type="submit" class="btn btn-sm btn-block btn-outline-primary active" aria-pressed="true">Button 2</button>
</div>
</div> <!-- row -->
<div class="form-row mt-4">
<div class="col-4 text-center">
<label>Desired</label>
<button type="submit" class="btn btn-sm btn-outline-primary btn-block active btn-block" aria-pressed="true">Row 2 Button</button>
</div>
<div class="col-auto text-center d-flex">
<button type="submit" class="btn btn-sm btn-outline-primary align-self-end active" aria-pressed="true">Not aligned with Row 2 Button</button>
</div>
</div> <!-- row -->
</form>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。