由于某种原因，我的网站可以水平滚动

Question

我正在创建一个带有论坛的网站，出于某种原因，它可以水平滚动。只有在我的论坛页面上才能水平滚动，我使用的 css 接近于零，主要是 bootstrap。如果我删除我的

<html lang="nl">
    <head>
        <title>name</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/css/style.css">
        <link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </head>
    <body>
        <?php 
        include 'assets/header.php';
        require_once('assets/getInfo.php');
        ?>
        <div class="row">
            <div class="container col-md-6" style="margin-top: 1rem">
                <?php
                foreach (getPost()['posts'] as $item) {
                    echo "  <div class='list-group' style='font-family: Quicksand; margin-top: .5rem'>
                                <a href='#' class='list-group-item list-group-item-action' aria-current='true'>
                                    <div class='d-flex w-100 justify-content-between'>
                                        <h5 class='mb-1'> " . $item['titel'] . " </h5>
                                        <small>" . $item['bericht_create_date'] . "</small>
                                    </div>
                                    <p class='mb-1'>" . $item['bericht'] . "</p>
                                    <small>Posted by " . $item['username'] . "</small>
                                </a>
                            </div>";
                }
                echo "
                <div class='container col-md-8 text-center justify-content-center' style='margin-top: .5rem;'>
                    <a class='btn btn-primary' role='button' href='forum?page=1'><<</a>
                    <a class='btn btn-primary' role='button' href='" . prevpage() . "'><</a>
                    <a class='btn btn-primary' role='button' href='" . nextpage() . "'>></a>
                    <a class='btn btn-primary' role='button' href='" . lastpage() . "'>>></a>
                </div>
                ";
                ?>
            </div>
            <?php
            if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true) {
                echo 
                "<div class='container col-md-3' style='margin-top: 1rem'>
                <form method='post' action='assets/postAddHandler'>
                    <div class='form-group'>
                        <label for='formGroupExampleInput'>Titel</label>
                        <input type='text' name='titel' class='form-control' id='formGroupExampleInput' placeholder='Example input'>
                    </div>
                    <div class='form-group'>
                        <label for='exampleFormControlTextarea1'>Bericht</label>
                        <textarea class='form-control' name='bericht' id='exampleFormControlTextarea1' rows='3'></textarea>
                    </div>
                    <div class='form-group'>
                        <label for='exampleFormControlFile1'>Foto</label>
                        <input type='file' name='foto' class='form-control-file' id='exampleFormControlFile1'>
                    </div>
                    <div class='form-group' style='margin-top: .5rem'>
                        <button type='submit' name='addPost' class='btn btn-success'>Add post</button>
                    </div>
                </form>
                </div>
                ";
            }
            ?>
        </div>  
    </body>
</html>

Answer 1

您只需要另一个在“.row”class 元素周围带有“.container”class 的元素，在这个通用结构中：

<div class="container">
    <div class="row">
        <div class="col">
            <h3>Column 1</h3>
            <p>text</p>
        </div>
        <div class="col">
            <h3>Column 2</h3>
            <p>text</p>
        </div>
    </div>
</div>

Answer 2

我为您修改了您的 codes.Hope 作品。他们应该是这样的：

<html lang="nl">

<head>
    <title>name</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/style.css">
    <link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</head>

<body>

<div class="container">
   
    <div class="page" style="margin-top: 1rem">
        <div class="row">
            <div class="col-6 mx-auto">
                <div class='list-group' style='font-family: Quicksand; margin-top: .5rem'>
                                <a href='#' class='list-group-item list-group-item-action' aria-current='true'>
                                    <div class='d-flex w-100 justify-content-between'>
                                        <h5 class='mb-1'> " . $item['titel'] . " </h5>
                                        <small>" . $item['bericht_create_date'] . "</small>
                                    </div>
                                    <p class='mb-1'>" . $item['bericht'] . "</p>
                                    <small>Posted by " . $item['username'] . "</small>
                                </a>
                            </div>
            </div>
                
                <div class="col-12 mx-auto mt-3">
                <div class='text-center justify-content-center' style='margin-top: .5rem;'>
                       
                    <a class='btn btn-primary' role='button' href='forum?page=1'><<</a>
                    <a class='btn btn-primary' role='button' href='" . prevpage() . "'><</a>
                    <a class='btn btn-primary' role='button' href='" . nextpage() . "'>></a>
                    <a class='btn btn-primary' role='button' href='" . lastpage() . "'>>></a>
                </div>
                </div>
            </div>

                <div class="container">
                    <div class="row">
                        <div class="col-12">
                <form method='post' action='assets/postAddHandler'>
                    <div class='form-group'>
                        <label for='formGroupExampleInput'>Titel</label>
                        <input type='text' name='titel' class='form-control' id='formGroupExampleInput' placeholder='Example input'>
                    </div>
                    <div class='form-group'>
                        <label for='exampleFormControlTextarea1'>Bericht</label>
                        <textarea class='form-control' name='bericht' id='exampleFormControlTextarea1' rows='3'></textarea>
                    </div>
                    <div class='form-group mt-2'>
                        <label for='exampleFormControlFile1'>Foto</label>
                        <input type='file' name='foto' class='form-control-file' id='exampleFormControlFile1'>
                    </div>
                    <div class='form-group' style='margin-top: .5rem'>
                        <button type='submit' name='addPost' class='btn btn-success'>Add post</button>
                    </div>
                </form>
                        </div>
                    </div>
                </div>
         
    </div>
</div>
</body>

</html>

除了这些代码之外，您还可以将此属性添加到您的 css:

html, body {
  max-width: 100%;
  overflow-x: hidden;
  padding:15px;
}

因此看起来比旧版本更正常。

最终 bootstrap 代码应如下所示：

由于某种原因，我的网站可以水平滚动

my site is scrollable horizontally for some reason

css

bootstrap-5