如何用JavaScript为Bootstrap待办列表动态添加Alert组件？

嘿，我来帮你搞定这个动态添加Alert并让它适配Bootstrap栅格的需求！你目前的代码已经能实现Alert的添加，但问题是把Alert直接加到了body里，脱离了页面的container栅格容器，所以没法跟着窗口缩放自适应。咱们来调整一下：

核心修改思路 #

• 在页面的container里专门加一个容器用来存放Alert，让它融入栅格系统
• 修改JavaScript代码，把生成的Alert插入到这个专属容器里，而不是body
• 给Alert套上Bootstrap栅格的列类，确保它自适应窗口

修改后的完整代码 #

HTML部分

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- Script to add tasks-->
  <script src=scripts.js></script>
  <title>To-do list</title>
</head>
<body>
  <div class="container">
    <h1 style="text-align: center">Todo List</h1>
    <form name="form1" action="" onsubmit="event.preventDefault(); myAlert(document.getElementById('task').value, document.getElementById('days').value)">
      <div class="form-group">
        <label for="task">Task</label>
        <input id="task" class="form-control" type="text" name="task" required>
      </div>
      <div class="form-group">
        <label for="days">Days To Complete</label>
        <input id="days" class="form-control" type="text" name="days" required>
        <!-- 修正了原代码里name属性写错的问题 -->
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <hr/>
    <!-- 新增：专门的Alert容器，符合Bootstrap栅格结构 -->
    <div id="alert-container" class="row"></div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

JavaScript部分（scripts.js）

function myAlert(task, days) {
  // 获取专门存放Alert的容器
  const alertContainer = document.getElementById('alert-container');
  
  // 生成Alert元素，外层套col-12确保占满栅格宽度，自适应窗口
  const wrapper = document.createElement('div');
  wrapper.className = 'col-12 mb-3'; // mb-3增加下边距，让Alert之间更美观
  wrapper.innerHTML = `<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>待办任务：</strong>${task}</br>
    <strong>完成期限：</strong>${days}天
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>`;
  
  // 将Alert插入到容器中
  alertContainer.appendChild(wrapper);
  
  // 提交后清空表单输入框，提升用户体验
  document.getElementById('task').value = '';
  document.getElementById('days').value = '';
}

关键修改点说明 #

• 新增#alert-container：把它放在container内部的<hr/>下方，用row类作为栅格行容器，所有Alert都存入这里，自然继承Bootstrap栅格的自适应特性
• Alert外层添加col-12：col-12表示在所有屏幕尺寸下占满整行，确保Alert宽度跟随container自动缩放，mb-3是Bootstrap间距类，避免Alert之间过于拥挤
• 修正表单name属性：原代码中days输入框的name误写为task，已修正为days，避免表单数据混淆
• 清空表单输入：提交任务后自动清空输入框，方便用户直接录入下一个任务

这样修改后，点击提交生成的Alert就能完美融入Bootstrap栅格系统，跟着窗口缩放自动调整宽度啦！

内容的提问来源于stack exchange，提问作者ericjb