flexbox - Bootstrap 4 - 正确显示带有文本和图标的项目列表
问题描述
使用 Bootstrap 4,我可以创建一个列表项列表。每个列表项都包含一个文本和一个带有图标的按钮。该图标取自Fontello。
在移动屏幕(XS 媒体)上,有时按钮不会将图标作为按钮内容。结果是一个非常小的按钮,不包含图标。这看起来像在移动设备上:
在我的桌面(F12,XS 设备)上的 Chrome 上,结果符合预期。
诊断是:当我添加一些行时,列表项的垂直大小会变小。添加 10 项,列表项只有几毫米高!因此,列表项的大小变得不那么高,按钮变得不那么高。这与' flexbox '有关吗?
为什么会这样?我知道,当您省略在按钮中放置任何内容(或任何文本)时,按钮将保持非常小。如何修复这个?
按钮的代码(在 Angular 6 中)
<ul class="list-group" id="cachesOnHikeList">
<li class="list-group-item d-flex flex-row" *ngFor="let cacheonhike of cachesonhike">
<div class="flex-grow-1">{{ cacheonhike.name| slice:0:22 }}</div>
<button type="button" class="btn btn-warning btn-sm" (click)="removeGeocache( cacheonhike.gcid)"><i class="icon-cancel-circled"></i></button>
</li>
</ul>
'cachesOnHikeList' CSS 类是:
#cachesOnHikeList {
/*max-height: 250px;*/
max-height:35vh;
overflow:auto;
overflow-y:scroll;
}
Plan-B也不起作用。此代码(添加 2 个字符作为按钮文本)产生相同的结果:
<button type="button" class="btn btn-warning btn-sm px-1"
(click)="removeGeocache( cacheonhike.gcid)"> <i class="icon-cancel-circled"></i> </button>
Plan-C:添加“真实”字符作为按钮文本无济于事。“X”显示在小按钮下方。该按钮类似于屏幕截图上的按钮。
<button type="button" class="btn btn-warning btn-sm px-1 font-weight-bold"
(click)="removeGeocache( cacheonhike.gcid)">X</button>
解决方案
小按钮的问题可能是由(我/该)结合使用 flexbox 和可滚动列表组引起的
解决方案 1:
用 BS4 网格替换 flexbox 解决方案。
<ul class="list-group" id="cachesOnHikeList">
<li class="list-group-item" *ngFor="let cacheonhike of cachesonhike">
<div class="row">
<div class="mr-auto">{{ cacheonhike.naam | slice:0:22 }}</div>
<button type="button" class="btn btn-warning btn-sm font-weight-bold col-2 col-sm-1 px-1" (click)="removeGeocache( cacheonhike.gcid)">X</button>
</div>
</li>
</ul>
解决方案 2:响应式 BS4 表
使用响应式的 Bootstrap 4 表。在这种情况下,列的宽度由 Bootstrap 自动确定。
<div class="row mt-2">
<div class="listMaxEntries">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>GcId</th>
<th>Naam</th>
<th class="d-none d-sm-table-cell">Type</th>
<th class="d-none d-md-table-cell">Actief</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let geocache of geocachesPage.geocaches"
(click)="saveGeocacheInApplicationDataAndEditIt( geocache)">
<td>{{ geocache.gcid | slice:0:9 }}</td>
<td>{{ geocache.naam }}</td>
<td class="d-none d-sm-table-cell">{{ geocache.type }}</td>
<td class="d-none d-md-table-cell">{{ geocache.actief }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
解决方案 3:带有 Flexbox 的 BS4 表。
使用此解决方案,您可以指定列宽。在这种情况下,行高很好!
<div class="row mt-2">
<div class="listMaxEntries">
<table id="productSizes" class="table">
<thead>
<tr class="d-flex">
<th class="col-3 col-md-2">GcId</th>
<th class="col-9 col-sm-7 col-md-5">Name</th>
<th class="col-sm-3 d-none d-sm-table-cell">Type</th>
<th class="col-md-2 d-none d-md-table-cell">Actief</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let geocache of geocachesPage.geocaches" class="d-flex"
(click)="saveGeocacheInApplicationDataAndEditIt( geocache)">
<td class="col-3 col-md-2">{{ geocache.gcid | slice:0:9 }}</td>
<td class="col-9 col-sm-7 col-md-5">{{ geocache.naam }}</td>
<td class="col-sm-3 d-none d-sm-table-cell">{{ geocache.type }}</td>
<td class="col-md-2 d-none d-md-table-cell">{{ geocache.actief }}</td>
</tr>
</tbody>
</table>
</div>
</div>
享受 Bootstrap 4 - 多么好的软件包!
推荐阅读
- visual-studio-code - VSCode:allautocompletion 扩展的全局模式是什么
- graphql - 如何在 FaunaDB 中连接多对一关系
- c# - 如何从响应数据中获取元素值到 json
- python - 打开现有 excel 文件、清除现有工作表并将数据框写入该工作表的最佳方法
- arrays - 使用带有外部循环的 OMP TASK 和带有内部循环的 OMP TASKLOOP 有什么区别?
- flutter - 如何检查flutter项目中依赖项使用了哪些权限?
- excel - 循环优化
- javascript - 向 ant 设计表中的单元格添加模式弹出窗口
- nuxt.js - 如何将依赖项导入 Vuex 操作?
- python - 使用 Tkinter 按下按钮时从条目返回值