как положить карты рядом друг с другом в html?

Question

Я пытаюсь положить эти карты рядом друг с другом, но все, что я пытаюсь записать на дисплее, кажется, ничего не работает. одна карта показывает отлично и в своем положении, так что кто-нибудь может сказать мне, как я могу решить эту проблему.

<div class="row">
            {% for doctor in recdoc %}
                    <div class="col-lg-10 col-md-10">
                        <div class="single_jobs white-bg d-flex justify-content-between" style="width: 50px;">
                            <div class="single_candidates text-center" style="height: 350px;">

                                <div class="thumb">
                                    <img class="img-circle " src="{% static 'static_file/img/candiateds/2.png' %}"
                                         alt="">
                                </div>
                                <a href=""><h4>{{ doctor.6 }} {{ doctor.7 }}</h4></a>
                                <p> {{ doctor.9 }}</p>
                                <div class="best-rating">
                                    <div class="text-warning">

                                        {% if doctor.16 == 1 %}
                                            <i class="fa fa-star"></i>
                                        {% elif doctor.16 == 2 %}
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                        {% elif doctor.16 == 3 %}
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                        {% elif doctor.16 == 4 %}
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                        {% elif doctor.16 == 5 %}
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                        {% endif %}


                                    </div>
                                    <div class="best-rating">
                                        <h5>تقييم الدكتور</h5>
                                    </div>
                                </div>
                            </div>


                        </div>

                    </div>
            {% endfor %}
        </div>

и вот скриншот с выводом:

Answer 1

В сетке bootstrap каждая строка содержит 12 столбцов, поэтому вы должны правильно установить столбцы, или вы можете использовать float:left; дать float:left; вашей карте div.

Посмотрите на карт или Сетка :