使用 flex 在 bootstrap 4 中浮动 2 个 div答案

【问题标题】：Float 2 divs in bootstrap 4 with flex使用 flex 在 bootstrap 4 中浮动 2 个 div
【发布时间】：2019-12-19 16:04:00
【问题描述】：

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

我也尝试过 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 对齐到行的右侧。

【问题讨论】：

使用justify-content-md-start，您可以指定将 div 内的内容放在“开始”位置，而不是 div 本身。为此，您需要像justify-self-start 这样的类（或带有 -md 或您需要的任何前缀）

标签： html css twitter-bootstrap bootstrap-4

【解决方案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/更新版本

【讨论】：

效果很好，但是这些类为这 2 个 div 提供了左右填充。我怎样才能删除它？
How can i delete that? 添加类p-0

【解决方案2】：

您需要在 flex 容器上添加 .w-100，在要向右推的元素上添加 .mr-auto。 .justify-content-md-start 和 .justify-content-md-end。您可以查看Bootstrap 4 doc 了解更多示例。

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

【讨论】：