Как выровнять кнопку вправо в framework7

Question

Извините за мой элементарный вопрос, но я потратил много времени, и я не могу понять ошибку. У меня есть карта, и я хотел бы показать кнопку справа внутри нижнего колонтитула карты. Теперь кнопка отображается слева.

Заранее спасибо!

Это моя страница HTML, где у меня есть карта

<div class="row">
  <div class="col-100 tablet-auto desktop-auto">
    <div class="card">
      <div class="card-content card-content-padding">
        <div class="row">
          <div class="col-100 tablet-auto desktop-80">
            <div class="list">
              <ul>
                <li>
                  <!--<a class="item-link smart-select smart-select-init">-->
                  <a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits1" data-page-back-link-text="Indietro">
                    <select name="fruits1">
                      <option value="">apple</option>
                      <option value="">banana</option>
                    </select>
                    <div class="item-content">
                      <div class="item-inner">
                        <div class="item-title">Fruits 1</div>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits2" data-page-back-link-text="Indietro">
                    <select name="fruits2"> </select>
                    <div class="item-content">
                      <div class="item-inner">
                        <div class="item-title">Fruits 2</div>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
            <!-- ./ list -->
          </div>
          <!-- ./ block -->
        </div>
        <!--col-->
      </div>
      <!--row-->
    </div>
    <!--card-content-->
    <div class="card-footer">
      <div class="row justify-content-right">
        <div class="col text-align-right">
          <a class="button button-fill" href="#">Search</a>
        </div>
      </div>
    </div>
    <!--card-footer-->
  </div>
  <!--card-->
</div>
<!--col-->

Answer 1

Вы можете решить проблему, распределив нижний колонтитул по двум разделам: один для левого, второй для правого или по пользовательскому стилю....

Вы можете обновить свой код, добавив пустой интервал перед кнопкой, тогда нижний колонтитул карты будет отображать вашу кнопку справа...

Посмотрите на эту демонстрацию.

    <div class="card">
      <div class="card-header">Card header</div>
      <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
      <div class="card-footer"><span></span><a class="button button-fill" href="#">Search</a>
</div>