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” CSS类为：

#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 ：添加“真实”字符作为按钮文字无济于事。小按钮下方显示“ X”。该按钮类似于屏幕截图上的按钮。

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

Answer 1

小按钮的问题可能是由于（我/我）结合使用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 -一个非常不错的软件包！

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

1 个答案: