1

使用 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)">&nbsp;<i class="icon-cancel-circled"></i>&nbsp;</button>

Plan-C：添加“真实”字符作为按钮文本无济于事。“X”显示在小按钮下方。该按钮类似于屏幕截图上的按钮。

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

1 回答 1

0

小按钮的问题可能是由（我/该）结合使用 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 - 多么好的软件包！

于 2019-02-23T20:02:46.583 回答