Bootstrap4+CodeIgniter表单Mac Safari响应式失效问题求助

Hey Kumar, let's figure out why your Bootstrap 4 + CodeIgniter form is acting up on Safari for Mac while working perfectly on Windows Chrome and Firefox. After going through your code, I've identified a few key issues that are likely causing the responsive breakdown:

1. 错误的布局嵌套结构 #

Bootstrap 4 的栅格系统要求严格的层级：form-row → col-* → form-group。但你的代码里把form-group放在了col-*外面，这会导致栅格的响应式规则无法正确生效，尤其是 Safari 对布局嵌套的校验更严格。

2. 过时的栅格类 #

Bootstrap 4 已经移除了 col-xs-* 类，取而代之的是直接用 col-*（因为 xs 是默认断点，无需额外前缀）。旧的类名在 Safari 中可能无法被正确解析。

3. 重复的 autofocus 属性 #

你给多个输入框都添加了 autofocus，这是无效的（一个页面只能有一个元素拥有该属性），而且可能干扰 Safari 的渲染逻辑。

4. 缺失/错误的 Viewport 元标签 #

如果你的 HTML 头部没有正确添加 viewport 标签，Safari 会无法识别响应式断点，这是响应式布局的基础。确保头部包含：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

修复后的完整代码 #

<?php echo form_open('user/signup');?>
<!-- 第一行：名字和姓氏 -->
<div class="form-row">
    <div class="col-md-6 col-12">
        <div class="form-group">
            <div class="form-label-group">
                <?php echo form_input(['name'=>'firstname','id'=>'firstname','class'=>'form-control','autofocus'=>'autofocus','value'=>set_value('firstname')]);?>
                <?php echo form_label('Enter your first name', 'firstname'); ?>
                <?php echo form_error('firstname',"<div style='color:red'>","</div>");?>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-12">
        <div class="form-group">
            <div class="form-label-group">
                <?php echo form_input(['name'=>'lastname','id'=>'lastname','class'=>'form-control','value'=>set_value('lastname')]);?>
                <?php echo form_label('Enter your last name', 'lastname'); ?>
                <?php echo form_error('lastname',"<div style='color:red'>","</div>");?>
            </div>
        </div>
    </div>
</div>

<!-- 邮箱 -->
<div class="form-group">
    <div class="form-label-group">
        <?php echo form_input(['name'=>'emailid','id'=>'emailid','class'=>'form-control','value'=>set_value('emailid')]);?>
        <?php echo form_label('Enter valid email id', 'emailid'); ?>
        <?php echo form_error('emailid',"<div style='color:red'>","</div>");?>
    </div>
</div>

<!-- 手机号 -->
<div class="form-group">
    <div class="form-label-group">
        <?php echo form_input(['name'=>'mobilenumber','id'=>'mobilenumber','class'=>'form-control','value'=>set_value('mobilenumber')]);?>
        <?php echo form_label('Enter Mobile Number', 'mobilenumber'); ?>
        <?php echo form_error('mobilenumber',"<div style='color:red'>","</div>");?>
    </div>
</div>

<!-- 密码行 -->
<div class="form-row">
    <div class="col-md-6 col-12">
        <div class="form-group">
            <div class="form-label-group">
                <?php echo form_password(['name'=>'password','id'=>'password','class'=>'form-control','value'=>set_value('password')]);?>
                <?php echo form_label('Password', 'password'); ?>
                <?php echo form_error('password',"<div style='color:red'>","</div>");?>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-12">
        <div class="form-group">
            <div class="form-label-group">
                <?php echo form_password(['name'=>'confirmpassword','id'=>'confirmpassword','class'=>'form-control','value'=>set_value('confirmpassword')]);?>
                <?php echo form_label('Confirm Password', 'confirmpassword'); ?>
                <?php echo form_error('confirmpassword',"<div style='color:red'>","</div>");?>
            </div>
        </div>
    </div>
</div>

<?php echo form_submit(['name'=>'Register','value'=>'Register','class'=>'btn btn-primary btn-block']); ?>
<?php echo form_close(); ?>

关键修复点说明 #

• 调整了布局层级：form-row 直接包含 col-*，col-* 内部包裹 form-group，符合 Bootstrap 4 的栅格规范
• 替换 col-xs-12 为 col-12，适配 Bootstrap 4 的类名规则
• 只保留第一个输入框的 autofocus 属性，避免浏览器解析冲突
• 确保你的 HTML 头部包含正确的 viewport 元标签（上面提到的）

Try this revised code and test it again on Safari for Mac—it should now render the responsive layout correctly. Let me know if you run into any other issues!

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