Изменение размера предупреждений при загрузке и сохранение знака «х» в нужном месте

1

У меня есть следующий HTML-код

<div class="row mt-2">
    <div class="col-lg-5">
        <div id="alertmessages"></div>
    </div>
    <div class="col-lg-7">
        <div class="btn-group-sm">
            <button type="button" id="SaveDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Save Draft</button>
            <button type="button" id="RestoreDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Restore Draft</button>
            <button type="button" id="DeleteDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Delete All Drafts</button>
        </div>
    </div>
</div>

Я использую этот javascript для отображения предупреждающих сообщений при нажатии кнопок, это для кнопки "Сохранить черновик":

$('#alertmessages').html
        ('<div class="alert alert-success alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>Your draft has been saved</div>');

Вот как отображаются предупреждения. Большие, чем "маленькие" кнопки

Изображение 174551

Я попытался переопределить CSS, но кнопка x появилась слишком далеко.

.alert {
  margin-bottom: 1px;
  height: 30px;
  line-height:30px;
  padding:0px 15px;
}
  • 0
    Фрагмент исполняемого кода будет проще для других, чтобы помочь вам ....
  • 0
    Так что ты хочешь случиться? Имеете ту же высоту для оповещения, что и для ваших кнопок?
Показать ещё 1 комментарий
Теги:
bootstrap-4

1 ответ

1
Лучший ответ

Добавьте класс px-2 py-1 в оба .alert и .close, пожалуйста, ознакомьтесь с приведенным ниже рабочим примером.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">


<div class="container">
  <div class="row mt-2">
    <div class="col-lg-5">
      <div class="alert alert-success alert-dismissible fade show px-2 py-1">
        <button type="button" class="close px-2 py-1" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        Your draft has been saved
      </div>
    </div>
    <div class="col-lg-7">
      <div class="btn-group-sm">
        <button type="button" id="SaveDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Save Draft</button>
        <button type="button" id="RestoreDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Restore Draft</button>
        <button type="button" id="DeleteDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Delete All Drafts</button>
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню