i am creating a site with a forum and for some reason it can be scrolled horizontally. only on my forum page is it able to scroll horizontally, i am using close to zero css and mainly bootstrap. if i remove my <div style="margin-top: 1rem" container i remove the horizontal scrolling so i assume it has something to do with that but absolutely no clue what it could be. code:
<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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 >
<div 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>
CodePudding user response：
You just need another element with a ".container" class around the ".row" class element, in this general structure:
<div >
<div >
<div >
<h3>Column 1</h3>
<p>text</p>
</div>
<div >
<h3>Column 2</h3>
<p>text</p>
</div>
</div>
</div>
CodePudding user response：
I modified your codes.Hope works for you. They should be like this:
<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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<body>
<div >
<div style="margin-top: 1rem">
<div >
<div >
<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 >
<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 >
<div >
<div >
<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>
Apart from these codes you can add this properties to your css:
html, body {
max-width: 100%;
overflow-x: hidden;
padding:15px;
}
As a result looks more normal than the older version.
Finally bootstrap codes should look like this:
