代码之家 › 专栏 › 技术社区 › Syntax Error ine

调整引导警报的大小并将“x”保持在正确的位置

bootstrap-4 css javascript

Syntax Error ine · 技术社区 · 6 年前

我有下面的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>');

警报就是这样显示的。大于“小”按钮

我试过重写css但是 x 巴顿然后出现了太远的下降。

.alert {
  margin-bottom: 1px;
  height: 30px;
  line-height:30px;
  padding:0px 15px;
}

1 回复 | 直到 6 年前

Girisha C 6 年前

添加类 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>