Bootstrap 4 - 正确显示带有文本和图标的项目列表

Question

使用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'CSSclass是：

#cachesOnHikeList {
  /*max-height: 250px;*/
  max-height:35vh;
  overflow:auto;
  overflow-y:scroll;
}

B计划也不行。此代码（添加 2 个字符作为按钮文本）产生相同的结果：

<button type="button" class="btn btn-warning btn-sm px-1" 
(click)="removeGeocache( cacheonhike.gcid)">&nbsp;<i class="icon-cancel-circled"></i>&nbsp;</button>

Plan-C：添加 'real' 字符作为按钮文本没有帮助。 'X' 显示在小按钮下方。该按钮类似于屏幕截图中的按钮。

<button type="button" class="btn btn-warning btn-sm px-1 font-weight-bold" 
(click)="removeGeocache( cacheonhike.gcid)">X</button>

Answer 1

小按钮的问题可能是 (my/the) 将 flexbox 与可滚动列表组结合使用引起的

解决方案 1：

将 flexbox 解决方案替换为 BS4 网格。

<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 table

使用响应式 Bootstrap 4 table。在这种情况下，列的宽度由 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：BS4 table 和 Flexbox。

使用此解决方案，您可以指定列宽。在这种情况下，行高很好！

<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 -- 多么好的包裹！

Bootstrap 4 - 正确显示带有文本和图标的项目列表

Bootstrap 4 - showing a list of items with texts and icons correctly

flexbox

fontello

bootstrap-4