时间戳

首页 > 解决方案 > Flex 显示为按钮提供自动高度

html - Flex 显示为按钮提供自动高度

问题描述

我有一个父 div，里面有 a<h1>和 a <button>。我用 justify content-between 浮动它们。因为，父 div 有一个 d-flex 类，所以按钮将具有与此父 div 相同的高度。

我该如何解决？对于按钮，我只需要一些填充。

他们没有任何CSS，只有一些颜色和背景颜色..

图片在这里

<div class="row">
    <div class="col-12 d-flex justify-content-between">
        <h1 class="page_title mb-4">Vélemények</h1>
        <span class="btn velemeny_btn"><i class="fa fa-user-edit mr-1"></i> Vélemény írása</span>
    </div>
    <div class="col">
        <div class="content"></div>
    </div>
</div>

标签： htmlcssbootstrap-4flexbox

解决方案

您必须添加align-self-start以span避免拉伸效果。

.velemeny_btn {
  background: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
    <div class="col-12 d-flex justify-content-between">
        <h1 class="page_title mb-4">Vélemények</h1>
        <span class="btn velemeny_btn align-self-start"><i class="fa fa-user-edit mr-1"></i> Vélemény írása</span>
    </div>
    <div class="col">
        <div class="content"></div>
    </div>
</div>

推荐阅读