如何解决Div使用d-inline出现在两行中
我试图在一行上显示两个或三个div,但它们总是出现在两个上。这是我的jsfiddle,下面是代码。这两个代码块是相同的,除了第二个代码块使用两个div,因为我认为这可能有所不同,但事实并非如此。如何使用行/列在Bootstrap4的一行中完成所有这些操作?
<div class="row justify-content-center">
<div class="col-3 d-inline-block">Title</div>
<form>
<div class="col-2 d-inline-block">Search
<input type="text" name="search">
</div>
</form>
</div>
<div class="row justify-content-center">
<div class="col-3 d-inline-block">Title</div>
<form>
<div class="col-2 d-inline-block">Search</div>
<div class="col d-inline-block"><input type="text" name="search"></div>
</form>
</div>
解决方法
引导程序行(.row
)和列(.col-*
)都是使用flex box构建的。列必须是行的直接子代才能生效。您拥有<form />
来包装搜索标签并输入的事实打破了这一点。
如果要创建内联表单,则可以使用一个类.form-inline
:https://getbootstrap.com/docs/4.5/components/forms/#inline-forms
对于内联表单,您可以尝试以下布局:
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-3">Title</div>
<form class="form-inline">
<label for="search" class="mr-2">Search</label>
<input id="search" type="text" name="search" class="form-control" />
</form>
</div>
</div>
-
.align-items-center
:使行中的项目垂直居中,可选 -
.form-inline
:使表单内联,必填 -
.mr-2
:在搜索标签上添加右页边距,以使表单与其本身之间存在间隙,可选
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。