使用flex在bootstrap 4中浮动2个div
使用flex在bootstrap 4中浮动2个div
提问于 2019-08-13 14:06:57
我有两个div，我想要在行中或容器div中浮动。对于这些类，.content-content-md-start和.jutify-content-md-end，它什么也不做。divs只是简单地相邻在一起，没有任何浮点。
我也尝试了像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>我想要的是将.justly-content-md-start div与行的左侧对齐，将justify-content-md-end div与行的右侧对齐。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-08-13 14:15:12
添加此类.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>Stack Overflow用户
发布于 2019-08-13 14:15:09
您需要在flex容器上添加.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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57471967
复制相关文章
相似问题
腾讯云开发者
