H
H
Hcuy2020-06-29 17:07:43
css
Hcuy, 2020-06-29 17:07:43

Bootstrap not working correctly?

Hello! There was a task to make a website, and already at the end of the layout (on bootstrap) I lowered my eyes to the bottom of the monitor, and was horrified. There I was met by this nonsense:
5ef9f4b3b84cb647979278.png
I faced such a problem a long time ago, but I can’t remember how to solve it.
And so I began to experiment, and I realized that even with one container, this thing appears.
How to solve it?
Thank you!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atamar</title>
    <link rel="stylesheet" href = "style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
    body{
        background: #E5FFDF;
    }
</style>    
</head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<body>

    <div class="row">
        <div class="col">Наша история</div>
        <div class="col">Магазин</div>
    </div>

</body>
</html>

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexander Sharomet, 2020-06-29
@Hcuy

Many solve this problem

body {
overflow: hidden
}

But this is not the right option, in bootstrap everything should fit perfectly without these styles.
In 90% of cases, it's a crookedly closed .row, or a .row immediately inside another .row, or you've changed the .container paddings.
To find this jamb, take one section at a time and figure out which section has the problem.
<!-- Самые частые ошибки -->
<div class="row">
  <div class="row">
  </div>
</div>
<div class="container px-1">
  <div class="row">
  </div>
</div>

I would like to see the code

D
damn, 2020-06-29
@lovebarcafc

This thing is called a scroll, apparently one of the elements goes beyond the boundaries of the browser window. Look for this element through the developer tools, and fix it.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question