Bootstrap-Vue表单无法在浏览器显示的问题排查与修复请求

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap-Vue + CodeIgniter Example</title>
  <!-- Bootstrap-Vue v2.x依赖Bootstrap 4.x，替换原Bootstrap 5.x版本 -->
  <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css">
</head>
<body>

  <div id="app">
    <b-container>
      <b-row>
        <b-col>
          <h1>Bootstrap-Vue + CodeIgniter Example</h1>
          <b-form @submit.prevent="submitForm">
            <b-form-group label="Name" label-for="name-input">
              <b-form-input id="name-input" v-model="form.name"></b-form-input>
            </b-form-group>
            <b-form-group label="Email" label-for="email-input">
              <b-form-input id="email-input" type="email" v-model="form.email"></b-form-input>
            </b-form-group>
            <b-button type="submit" variant="primary">Submit</b-button>
          </b-form>
        </b-col>
      </b-row>
    </b-container>
  </div>

  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>
  <script src="https://unpkg.com/axios@0.21.4/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          form: {
            name: '',
            email: ''
          }
        }
      },
      methods: {
        submitForm() {
          // 注意：非PHP环境测试时需替换为实际后端接口地址
          axios.post('<?php echo base_url('submit-form'); ?>', this.form)
            .then(response => {
              console.log(response.data);
              // 处理成功响应逻辑
            })
            .catch(error => {
              console.error(error);
              // 处理错误响应逻辑
            });
        }
      }
    });
  </script>

</body>
</html>

表单无法正常显示的原因 #

• 版本依赖冲突：Bootstrap-Vue v2.21.2是基于Bootstrap 4.x开发的，原代码错误引入了Bootstrap 5.1.3版本。Bootstrap 4和5的CSS类名、布局逻辑存在大量差异，导致Bootstrap-Vue的组件无法正确加载样式和渲染结构。
• 额外说明：如果在纯静态HTML环境下运行，代码中的PHP代码片段会直接显示为文本，但这不会影响表单组件的渲染，仅会导致提交功能失效，需在PHP环境中运行或替换为实际接口地址。

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