Как выровнять div с правильным пространством между bootstrap 4 - PullRequest
Новая
       3

Как выровнять div с правильным пространством между bootstrap 4

1 голос
/ 16 июня 2020

Как выровнять эти 3 div с дополнительным полем?

Я попробовал col-3, но у меня все еще не работает, я хочу, чтобы 1 div был слева, 2-й в центре и 3-й в право. Я пробовал использовать css для маржи, но он хуже в отзывчивости. мне нужно сделать адаптивную часть?

Отметьте это изображение, я хочу сделать это ..

i want proper space in in between these 3 divs

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>General Announcement</title>
        </head>
        <body>

        <section class="activities">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h3 class="text-center text-primary text-uppercase font-weight-bold mb-4">Upcoming activities for october 2019</h3>
                    </div>
                    <div class="col-md-3 mb-sm-5">
                        <img src="images/img-5.jpg" class="img-fluid">
                            <span class="d-block text-uppercase font-weight-bold mt-3">October 20</span>
                            <h4 class="text-uppercase font-weight-bold">Run for charity</h4>
                        <a href="#" class="btn btn-default btn-primary">More info</a>
                    </div>
                    <div class="col-md-3 mb-sm-5">
                        <img src="images/img-6.jpg" class="img-fluid">
                        <span class="d-block text-uppercase font-weight-bold mt-3">October 11</span>
                        <h4 class="text-uppercase font-weight-bold">Book drive</h4>
                        <a href="#" class="btn btn-default btn-primary">More info</a>
                    </div>
                    <div class="col-md-3">
                        <img src="images/img-7.jpg" class="img-fluid">
                        <span class="d-block text-uppercase font-weight-bold mt-3">October 21</span>
                        <h4 class="text-uppercase font-weight-bold">Recycling initiative</h4>
                        <a href="#" class="btn btn-default btn-primary">More info</a>
                    </div>
                </div>
            </div>
        </section>

        </body>
    </html>

Ответы [ 2 ]

1 голос
/ 16 июня 2020

Переместите часть заголовка col-12 за пределы того, что сейчас является вашей строкой, и измените строку на гибкий столбец. BS4 поддерживает гибкость, и это лучший способ go для этого варианта использования.

Вот fiddle 

<section class="activities">
        <div class="container">
        <div class="col-md-12">
                    <h3 class="text-center text-primary text-uppercase font-weight-bold mb-4">Upcoming activities for october 2019</h3>
                </div>
            <div class="d-flex justify-content-between">

                <div class="col-md-3 mb-sm-5">
                    <img src="images/img-5.jpg" class="img-fluid">
                        <span class="d-block text-uppercase font-weight-bold mt-3">October 20</span>
                        <h4 class="text-uppercase font-weight-bold">Run for charity</h4>
                    <a href="#" class="btn btn-default btn-primary">More info</a>
                </div>
                <div class="col-md-3 mb-sm-5">
                    <img src="images/img-6.jpg" class="img-fluid">
                    <span class="d-block text-uppercase font-weight-bold mt-3">October 11</span>
                    <h4 class="text-uppercase font-weight-bold">Book drive</h4>
                    <a href="#" class="btn btn-default btn-primary">More info</a>
                </div>
                <div class="col-md-3">
                    <img src="images/img-7.jpg" class="img-fluid">
                    <span class="d-block text-uppercase font-weight-bold mt-3">October 21</span>
                    <h4 class="text-uppercase font-weight-bold">Recycling initiative</h4>
                    <a href="#" class="btn btn-default btn-primary">More info</a>
                </div>
            </div>
        </div>
    </section>
0 голосов
/ 16 июня 2020

Необходимо указать Bootstrap css. 

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

<head>
    <meta charset="UTF-8">
    <title>General Announcement</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>

    <section class="activities">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-md-12">
                    <h3 class="text-center text-primary text-uppercase font-weight-bold mb-4">Upcoming activities for
                        october 2019</h3>
                </div>
                <div class="col-md-3 mb-sm-5">
                    <img src="images/img-5.jpg" class="img-fluid">
                    <span class="d-block text-uppercase font-weight-bold mt-3">October 20</span>
                    <h4 class="text-uppercase font-weight-bold">Run for charity</h4>
                    <a href="#" class="btn btn-default btn-primary">More info</a>
                </div>
                <div class="col-md-3 mb-sm-5">
                    <img src="images/img-6.jpg" class="img-fluid">
                    <span class="d-block text-uppercase font-weight-bold mt-3">October 11</span>
                    <h4 class="text-uppercase font-weight-bold">Book drive</h4>
                    <a href="#" class="btn btn-default btn-primary">More info</a>
                </div>
                <div class="col-md-3">
                    <img src="images/img-7.jpg" class="img-fluid">
                    <span class="d-block text-uppercase font-weight-bold mt-3">October 21</span>
                    <h4 class="text-uppercase font-weight-bold">Recycling initiative</h4>
                    <a href="#" class="btn btn-default btn-primary">More info</a>
                </div>
            </div>
        </div>
    </section>

</body>

</html>

попробуйте это Надеюсь, это сработает :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...