PC与移动端网页展示不一致求助：按钮及图片布局修复

问题说明 #

网站页面在PC端与移动端展示效果不一致：

• PC端：按钮正常显示，图片居中展示
• 移动端：左右切换按钮不可见，图片未居中

问题原因 #

1. 切换按钮布局冲突：按钮同时使用float浮动和position: absolute绝对定位，且右侧按钮设置left:95%，在窄屏移动端会被挤出可视区域；垂直居中仅靠top:50%未做偏移修正，定位不准确。
2. 图片布局问题：图片设置了固定的width:50%和margin-right:5%，强制偏移导致无法居中；<center>标签在现代布局中兼容性差，且固定宽高在移动端无法自适应。
3. Bootstrap版本混用：引入Bootstrap 5的CSS却搭配Bootstrap 4的JS，可能引发样式与脚本冲突。

修复方案 #

1. 调整切换按钮布局 #

• 移除按钮的float属性和left:95%设置，新增btn-prev/btn-next类固定左右偏移量
• 用transform: translateY(-50%)修正垂直居中，确保按钮在屏幕垂直中间位置
• 增加z-index保证按钮在图片上方显示

2. 修复图片居中与自适应 #

• 移除图片的margin-right:5%和固定宽高，改用max-width:100%和max-height:80vh实现自适应
• 使用Bootstrap的d-flex justify-content-center容器实现图片水平居中

3. 统一Bootstrap版本 #

将CSS和JS统一为Bootstrap 4版本，避免版本冲突

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/logo2.png">
    <title>Photo - T-Construction</title>

    <!-- 统一使用Bootstrap 4版本 -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>

    <style type="text/css">
        body {
            background-color: black;
            min-height: 100vh;
            position: relative;
        }
        .btnfleche{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }
        .btn-prev {
            left: 20px;
        }
        .btn-next {
            right: 20px;
        }
        .main-image {
            max-width: 100%;
            max-height: 80vh;
            margin-top: 2rem;
        }
    </style>

</head>
<body>

    <button type="button" class="btn btn-success" onclick="window.location.href='realisation.php';" style="margin: 2rem;">Retour</button>

    <?php

    $ids = intval($_GET["photoid"]);
    $idm = $ids-1;
    $idp = $ids+1;

    if($ids == null){
        header("location:realisation.php");
    }else{

        require 'dbcon.php';

        $getreal = $con -> prepare("select image from realisations where id = ?");
        $getreal -> bindParam(1, $ids);
        $getreal -> execute();
        $donnees = $getreal -> fetchall();
        if($donnees == null){
            header("location:realisation.php");
        }

        ?>

        <!-- 使用Bootstrap容器实现图片居中 -->
        <div class="container d-flex justify-content-center">
            <img src="<?php echo($donnees[0]['image']); ?>" class="main-image" alt="Construction photo">
        </div>

        <?php

        $getrealm = $con -> prepare("select image from realisations where id = ?");
        $getrealm -> bindParam(1, $idm);
        $getrealm -> execute();
        $donneesm = $getrealm -> fetchall();
        if($donneesm != null){
            ?>
            <button type="button" class="btn btn-dark btnfleche btn-prev" onclick="window.location.href='realphoto.php?photoid=<?php echo($idm); ?>';">
                <h3><--</h3>
            </button>
            <?php
        }

        $getrealp = $con -> prepare("select image from realisations where id = ?");
        $getrealp -> bindParam(1, $idp);
        $getrealp -> execute();
        $donneesp = $getrealp -> fetchall();
        if($donneesp != null){
            ?>
            <button type="button" class="btn btn-dark btnfleche btn-next" onclick="window.location.href='realphoto.php?photoid=<?php echo($idp); ?>';">
                <h3>--></h3>
            </button>
            <?php
        }

    }

    ?>

</body>
</html>

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