Float 2 div в bootstrap 4 с помощью flex

У меня есть 2 div, которые я хочу разместить в строке или в контейнере div. С этими классами .justify-content-md-start и .justify-content-md-end ничего не делает. Дивы просто расположены рядом друг с другом без поплавка.

Я также пробовал такие классы, как float-left и float-right, но это была та же проблема.

<div class="container kategoria_page_info_2">
    <div class="row">
        <div class="d-flex align-items-center">
            <div class="justify-content-md-start"><span class="category_page_count_">Ebben a kategóriában összesen 7 termék található.</span></div>
            <div class="justify-content-md-end">
                <form method="get" name="listing_items">
                    <select class="form-control" onchange="listing_items.submit()" name="order">
                        <option value="id_desc">Legújabb termékek</option>
                        <option selected="selected" value="id_asc">Régebbiek elöl</option>
                        <option value="nev_asc">Név, A – Z</option>
                        <option value="nev_desc">Név, Z - A</option>
                        <option value="price_asc">Ár szerint növekvő</option>
                        <option value="price_desc">Ár szerint csökkenő</option>
                    </select>
                </form>
            </div>
        </div>
    </div>
</div>

Я хочу выровнять div .justify-content-md-start по левой стороне строки и выровнять div justify-content-md-end по правой стороне строки.

введите здесь описание изображения


html css twitter-bootstrap bootstrap-4
person max777    schedule 13.08.2019    source источник
comment
С помощью justify-content-md-start вы указываете, что содержимое внутри div должно быть помещено в начало, а не сам div. Для этого вам понадобится класс типа justify-self-start (или с -md или любым другим префиксом, который вам нужен)   -  person cloned    schedule 13.08.2019

Ответы (2)


arrow_upward
0
arrow_downward

Добавить этот класс .col-md-12 & .justify-content-between

<div class="container kategoria_page_info_2">
    <div class="row">
        <div class="col-md-12 p-0 d-flex align-items-center justify-content-between">
            <div class=""><span class="category_page_count_">Ebben a kategóriában összesen 7 termék található.</span></div>
            <div class="">
                <form method="get" name="listing_items">
                    <select class="form-control" onchange="listing_items.submit()" name="order">
                        <option value="id_desc">Legújabb termékek</option>
                        <option selected="selected" value="id_asc">Régebbiek elöl</option>
                        <option value="nev_asc">Név, A – Z</option>
                        <option value="nev_desc">Név, Z - A</option>
                        <option value="price_asc">Ár szerint növekvő</option>
                        <option value="price_desc">Ár szerint csökkenő</option>
                    </select>
                </form>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/lalji1051/7s5fuxpg/1/

https://jsfiddle.net/lalji1051/rqjdhm4L/ Обновленная версия

person Lalji Tadhani    schedule 13.08.2019
comment
Это нормально работает, но эти классы добавляют отступы слева и справа от этих двух div. Как я могу это удалить? - person max777; 13.08.2019
comment
How can i delete that? добавить класс p-0 - person Lalji Tadhani; 13.08.2019

arrow_upward
0
arrow_downward

Вам нужно добавить .w-100 на гибкий контейнер и .mr-auto на элемент, который вы хотите сдвинуть вправо. .justify-content-md-start и .justify-content-md-end. Дополнительные примеры можно найти в документации Bootstrap 4.

<div class="container kategoria_page_info_2">
    <div class="row">
        <div class="d-flex align-items-center w-100">
            <div class=""><span class="category_page_count_">Ebben a kategóriában összesen 7 termék található.</span></div>
            <div class="mr-auto">
                <form method="get" name="listing_items">
                    <select class="form-control" onchange="listing_items.submit()" name="order">
                        <option value="id_desc">Legújabb termékek</option>
                        <option selected="selected" value="id_asc">Régebbiek elöl</option>
                        <option value="nev_asc">Név, A – Z</option>
                        <option value="nev_desc">Név, Z - A</option>
                        <option value="price_asc">Ár szerint növekvő</option>
                        <option value="price_desc">Ár szerint csökkenő</option>
                    </select>
                </form>
            </div>
        </div>
    </div>
</div>
person Yor    schedule 13.08.2019