Question

我创建了一个页面，其中包含一个按钮，单击按钮时，根据某些事件，引导警报框出现成功或错误代码如下：

 <div class="col-lg-12">
   <button type="button" id="my_button" class="btn btn-primary btn-lg">Download</button>
     <span id="download_ok" class="alert alert-info">
         File downloaded successfully
     </span>
     <span id="download_fail" class="alert alert-danger">
               File failed to download
     </span>
</div>

虽然jquery代码如下：

$('#download_ok').fadeIn({
  duration: 800
});

$('#download_fail').fadeIn({
 duration: 800
});

代码正常工作，按钮旁边印有日志信息当我尝试通过将类放入class =＆＃34; col-lg-4＆＃34;警告信息打印时格式错误，单词＆＃34;成功＆＃34;重叠单词＆＃34;文件已下载＆＃34;。我认为警报出现在相关按钮正下方的新行上会很好，但无论我尝试使用CSS定位还是添加<br/>在html中没有让我得到所需的结果，输出格式总是崩溃有任何想法如何处理这个问题？

Answer 1

将span更改为div

 <div class="col-lg-12">
   <button type="button" id="my_button" class="btn btn-primary btn-lg">Download</button>
     <div id="download_ok" class="alert alert-info">
         File downloaded successfully
     </div>
     <div id="download_fail" class="alert alert-danger">
               File failed to download
     </div>
</div>

Answer 2

首先：将span更改为div

<div class="col-lg-12">
    <button type="button" id="my_button" class="btn btn-primary btn-lg">Download</button>
    <div id="download_ok" class="alert alert-info">
        File downloaded successfully
    </div>
    <div id="download_fail" class="alert alert-danger">
        File failed to download
    </div>
</div>

其次：您需要先隐藏要淡入的元素

$('#download_ok').hide();
$('#download_fail').hide();

$('#download_ok').fadeIn({
    duration: 800
});

$('#download_fail').fadeIn({
    duration: 800
});

如何使引导警报框显示在按钮下方

2 个答案: