【发布时间】：2020-07-20 14:53:12
【问题描述】：
我希望被包裹的 H2 文本（子元素）有一个适合包裹文本宽度的漂亮边框。
使用正确的 bootstrap 类几乎可以到达那里，但是当我给我的 H2 类“flex-grow-0”时它不起作用。如果我使用内联样式“flex: 0 0;”，它完全符合我的要求。见sn-p。我真的很想避免自己创建课程。谢谢！
:root {
/* Change colors here to affect the whole site + change manually the colors in the .gradient tag + navigation etc */
--color1:#F39207; /* Oranje */
--color2:#951B81; /* Paars */
--color3:#ffffff; /* White */
--color4:#e6e6e6; /* grey */
}
/* GRID
------------------------------------------------------ */
.grid article div div {
height:20em;
}
.grid article div div {
overflow: hidden;
position: relative;
}
.grid article div div figure div {
position: absolute;
top: 0;
left: 0;
background-position: center;
background-size: cover;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-o-transition: all 1.5s;
transition: all 1.5s;
}
.grid article div div figure div:hover {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
/* GRID - Text */
.grid figcaption {
z-index: 2;
}
.grid figcaption .grid-title-band {
font-family: sans-serif;
color: var(--color3);
text-transform: uppercase;
letter-spacing: 0.3em;
border:0.4em solid var(--color3);
clip-path: polygon(
calc(0% + 5px) calc(0% + 5px), /* top left */
calc(100% - 5px) calc(0% + 5px), /* top right */
calc(100% - 5px) calc(100% - 5px), /* bottom right */
calc(0% + 5px) calc(100% - 5px) /* bottom left */
);
transition: clip-path 0.4s linear;
}
.grid figcaption:hover .grid-title-band {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<section class="grid">
<article class="row bg-white pt-2 pb-2">
<!-- Item // NOT GOOD -->
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-4 p-2">
<div>
<a href="" class="text-decoration-none">
<figure class="d-flex h-100 align-items-center justify-content-center p-5">
<div class="w-100" style="background-image:url(http://www.cactusfestival.be/test-2/pics/bands/het_zesde_metaal.jpg);"></div>
<figcaption class="d-flex flex-wrap justify-content-around"><h2 class="flex-grow-0 grid-title-band p-3 m-0">This Example Is Wrong - Original</h2></figcaption>
</figure>
</a>
</div>
</div>
<!-- / Item -->
<!-- Item // NOT GOOD -->
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-4 p-2">
<div>
<a href="" class="text-decoration-none">
<figure class="d-flex h-100 align-items-center justify-content-center p-5">
<div class="w-100" style="background-image:url(http://www.cactusfestival.be/test-2/pics/bands/het_zesde_metaal.jpg);"></div>
<figcaption class="d-flex flex-wrap justify-content-around"><h2 class="flex-shrink-0 flex-grow-0 grid-title-band p-3 m-0">This Example Is Wrong - Edits</h2></figcaption>
</figure>
</a>
</div>
</div>
<!-- / Item -->
<!-- Item // GOOD -->
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-4 p-2">
<div>
<a href="" class="text-decoration-none">
<figure class="d-flex h-100 align-items-center justify-content-center p-5">
<div class="w-100" style="background-image:url(http://www.cactusfestival.be/test-2/pics/bands/het_zesde_metaal.jpg);"></div>
<figcaption class="d-flex flex-wrap justify-content-around"><h2 class="grid-title-band p-3 m-0" style="flex:0 0;">This Example Is Good</h2></figcaption>
</figure>
</a>
</div>
</div>
<!-- / Item -->
</article>
</section>
</body>
</html>【问题讨论】：
-
因为
flex-grow:0与flex: 0 0 0不同。您需要将flex-basis设置为0，否则默认为auto。 -
你的意思是在 H2 类中：flex-grow-0 flex-basis-0 ..."？我在 sn-p 中调整了这个但是它不起作用。或者你的意思是在某个地方否则？我是新手，你能详细说明一下吗？Tnx
-
没有flex-basis，需要使用flex-shrink-0和flex-grow-0
-
之前尝试过 flex-shrink-0 和 flex-grow-0（参见 sn-p），但没有用 :(
-
flex-basis: 0似乎没有实用程序类，但这是 AFAICT 的解决方案。
标签： css bootstrap-4 flexbox