使用flex在引导4中浮动2个div

Question

我有2 div，我想漂浮在行或容器div。对于这些类，. prie-entent-md-start和. prie-entent-md-end，它什么都不做。div只是简单地挨着彼此，没有任何浮动。

我也尝试了像左浮动和右浮动这样的课程，但问题是一样的。

<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>

我要做的是，对齐。将内容md开始div对齐到行的左侧，并将内容md结束div对齐到行的右侧。

Answer 1

您需要在flex容器上添加. w-100，并在要向右推送的元素上添加. mr-auto。您可以查看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>

Answer 2

添加此类。col-md-12

<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/更新版本