Как выровнять кнопку вправо в framework7 - PullRequest
Новая
       8

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

0 голосов
/ 22 ноября 2018

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

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

Это моя 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-->

1 Ответ

0 голосов
/ 24 ноября 2018

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

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

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

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