Кнопка с плавающей точкой справа в модальном заголовке рядом с кнопкой закрытия - PullRequest
Новая
       19

Кнопка с плавающей точкой справа в модальном заголовке рядом с кнопкой закрытия

1 голос
/ 03 октября 2019

У меня есть модал и я хотел добавить некоторые детали и кнопки в шапку. У меня есть заголовок и кнопка закрытия. Я также хочу добавить еще одну кнопку слева от кнопки закрытия. Кнопка продолжает плавать влево, хотя у меня настроено float-right.

Мой код: 

<div class="modal-header">
                      <h5 class="modal-title"></h5>
                      <div class="float-right">
                        <a id='modal_csv'><i class="fas fa-camera"></i></a>
                      </div>

                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>

Мой вывод:

float right

Как мне плавать 

<div class="float-right">
   <a id='modal_csv'><i class="fas fa-camera"></i></a>
</div>

вправо рядом с кнопкой закрытия. Что я делаю не так?

Ответы [ 2 ]

2 голосов
/ 03 октября 2019

Вот рабочий пример, я не изменил ни одного html, возможно, ваш css неверен или я не понимаю. 

html {
  font-family: Arial, Helvetica, sans-serif;
}

.modal-title {
  display: inline-block;
}

.modal-header {
  width: 300px;
  height: 60px;
  background: #e6e6e6;
  border-radius: 5px;
  padding: 5px;
}

h5 {
  font-size: 26px;
  margin: 14px 0;
}

.float-right,
.close {
  float: right;
  margin: 20px 4px;
}

i {
  font-size: 22px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="modal-header">
  <h5 class="modal-title">Mobile</h5>
  <div class="float-right">
    <a id='modal_csv'><i class="fas fa-camera-retro"></i></a>
  </div>

  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
2 голосов
/ 03 октября 2019

Я думаю, что это макет, как вы хотели ...

Я думаю, что вы хотели использовать pull-right

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="modal-header">
                      <h5 class="modal-title pull-left">Title</h5>

                      <div class="pull-right">
                        <a id='modal_csv'><i class="fas fa-camera"></i></a>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                      </div> 
                    </div>
...