html - 使用 flex 在 bootstrap 4 中 float 2 个 div

Question

我有 2 个 div，我想在行中或容器 div 中 float 。 对于这些类，.justify-content-md-start 和 .justify-content-md-end，它什么都不做。 div 只是彼此相邻，没有任何 float 。

我也试过 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>

我想要的是将 .justify-content-md-start div 对齐到行的左侧，并将 justify-content-md-end div 对齐到行的右侧。

Answer 1

添加此类.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/更新版本