Bootstrap 5固定和动态宽度力在同一行的网格

Question

我正试图为我的Blazor应用程序建立一个网格系统，具有非常小的固定大小的列和一个大的列。
不能使用colx -xs-*划分为12个网格列。到目前为止，在没有col类的情况下设置自定义宽度是有效的，但是对于长单词(甚至使用break-word - overflow-wrap)，我的最后一列将在新行中获得完整的宽度。
我想在一行中呈现所有内容，就像下面示例中的第二行一样。

@import "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css";

<div class="container">
<div class="row border">
<div class="border" style="width:30px">X</div>
<div class="border" style="width:40px">XX</div>
<div class="col border" style="overflow-wrap: break-word;">tooLongForThisRooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooow</div>
</div>
<div class="row border">
<div class="border" style="width:30px">Y</div>
<div class="border" style="width:40px">YY</div>
<div class="col border" style="overflow-wrap: break-word;">not too long not too long not too long not too long not too long not too long not too long not too long not too long not too long not too long</div>
</div>
</div>

Answer 1

文本换行可以通过.text-wrap和.text-break实现。只有列应该是行的后代。您要么需要使用.col-1,.col-1,.col-10在.row的内部，或把所有三个元素在一个12列flexbox容器.col-12.d-flex:

@import "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css";

<div class="container">
<!-- flexbox -->
<div class="row p-0">
<div class="col-12 d-flex border p-0">
<div class="p-2 border" style="width:30px !important;">X</div>
<div class="p-2 border" style="width:40px !important;">XX</div>
<div class="p-2 border text-wrap text-break">
tooLongForThisRooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooow
</div>
</div>
</div>
<!-- grid -->
<div class="row border">
<div class="col-1 border" style="width:30px !important;">X</div>
<div class="col-1 border" style="width:40px !important;">XX</div>
<div class="col-10 border text-wrap text-break">
tooLongForThisRooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooow
</div>
</div>
<div class="row border">
<div class="border" style="width:30px">Y</div>
<div class="border" style="width:40px">YY</div>
<div class="col border" style="overflow-wrap: break-word;">not too long not too long not too long not too long not too long not too long not too long not too long not too long not too long not too long</div>
</div>
</div>