Bootstrap 4 - правильно показывает список предметов с текстами и иконками - PullRequest
Новая
       70

Bootstrap 4 - правильно показывает список предметов с текстами и иконками

0 голосов
/ 23 февраля 2019

Используя Bootstrap 4, я могу создать список элементов списка.Каждый элемент списка содержит текст и кнопку со значком.Значок взят из Fontello .

На экранах мобильных устройств (мультимедиа XS) иногда кнопка не воспринимает значок как содержимое кнопки.В результате получается очень маленькая кнопка, на которой нет значка.Это выглядит на мобильном устройстве:

enter image description here

В Chrome на моем рабочем столе (F12, устройство XS) результат такой, как ожидалось.

Диагноз: : Когда я добавляю количество строк, размер элемента списка по вертикали уменьшается.Добавление 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>

Класс CSS cachesOnHikeList: 

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

1 Ответ

0 голосов
/ 23 февраля 2019

Проблема маленьких кнопок может быть вызвана (моим / 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

Использование адаптивной таблицы 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 : таблица BS4 с 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 - что за очень хороший пакет!

...