Вопрос по Bootstrap или по CSS

Question

Вопрос заключается в том что сетку то есть Grid не действует padding контейнера, как это исправить, Например на заголовку действует а сетку не действует, помогите пожалуйста Внизу код

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container" style="background-color:#333">
        <h2 class="text-light">Grid Test</h2>
        <div class="bg-primary">
            <div class="row">
                <div class="col-4 p-1 border">Text1</div>
                <div class="col-4 p-1 border">Text2</div>
                <div class="col-4 p-1 border">Text3</div>
            </div>
            <div class="row">
                <div class="col-4 p-1 border">Text4</div>
                <div class="col-4 p-1 border">Text5</div>
                <div class="col-4 p-1 border">Text6</div>
            </div>
        </div>
    </div>
</body>

</html>

Answer 1

По умолчанию в классе .row есть правила margin-left и margin-right.

Добавьте m-0 для каждого .row, чтобы убрать отрицательное значение, которое растягивает ряд.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container" style="background-color:#333">
        <h2 class="text-light">Grid Test</h2>
        <div class="bg-primary">
            <div class="row m-0">
                <div class="col-4 p-1 border">Text1</div>
                <div class="col-4 p-1 border">Text2</div>
                <div class="col-4 p-1 border">Text3</div>
            </div>
            <div class="row m-0">
                <div class="col-4 p-1 border">Text4</div>
                <div class="col-4 p-1 border">Text5</div>
                <div class="col-4 p-1 border">Text6</div>
            </div>
        </div>
    </div>
</body>

</html>

БЛОГ НА HUSL

Вопрос по Bootstrap или по CSS

Ответы (1 шт):