Как выровнять текст в кнопке таблицы в мобильном представлении - PullRequest
Новая
       4

Как выровнять текст в кнопке таблицы в мобильном представлении

0 голосов
/ 29 февраля 2020

Я использую "Bootstrap -4". Представьте, что у меня есть следующая таблица: 

<div class="table-responsive">  
    <table class="table table-sm table-hover">
        <thead>
            <tr>
                <th>Item 01</th>
                <th>Item 02</th>
                <th class="col">Buttons</th>
                <th class="col-1">Item 04</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Item 01</td>
                <td>Very length column</td>
                <th class="col">
                    <div class="row no-gutters">
                        <div class="col-2">
                            <button class="btn btn-secondary btn-block">
                                -
                            </button>
                        </div>
                        <div class="col text-center quantity">
                            7 in cart
                        </div>
                        <div class="col-2">
                          <button class="btn btn-secondary btn-block">
                              +
                          </button>
                        </div>
                    </div>
                </th>
                <th class="col-1">Item 04</th>
            </tr>
        </tbody>
    </table>
</div>

Знаки кнопок, такие как - и +, отлично смотрятся на больших экранах:

enter image description here

Однако на меньших устройствах (например, 275px) эти знаки не выровнены:

enter image description here

Возможно ли выравнивание знаков такие как - и + в кнопках на небольших устройствах?

Пример можно увидеть здесь.

1 Ответ

2 голосов
/ 29 февраля 2020

Чтобы выровнять их, удалите класс btn-block из каждого элемента <button>. Это удалит width: 100% и предотвратит изменение их размера при меньшей ширине области просмотра: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
  <table class="table table-sm table-hover">
    <thead>
      <tr>
        <th>Item 01</th>
        <th>Item 02</th>
        <th class="col">Buttons</th>
        <th class="col-1">Item 04</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Item 01</td>
        <td>Very length column</td>
        <th class="col">
          <div class="row no-gutters">
            <div class="col-2">
              <button class="btn btn-secondary">-</button>
            </div>
            <div class="col text-center quantity">
              7 in cart
            </div>
            <div class="col-2">
              <button class="btn btn-secondary">+</button>
            </div>
          </div>
        </th>
        <th class="col-1">Item 04</th>
      </tr>
    </tbody>
  </table>
</div>
...