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

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

  •  1
  • 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>');
    

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

    Alert larger than buttons picture

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

    .alert {
      margin-bottom: 1px;
      height: 30px;
      line-height:30px;
      padding:0px 15px;
    }
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   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>