如何解决如果我将Bootstrap行用作其子div的flex容器,而不是使用列,那还好吗?
我是Web开发的新手,并且在我的个人项目中一直使用Bootstrap v4。根据Bootstrap文档中提到的网格系统,其中包含一列。我注意到默认情况下,Bootstrap行是flex容器,而我放入行中的div的行为都类似于flex元素。因此,它们会缩小到其中的内容。
但是,如果我将col类应用于行内的那些div,则col div现在会填满整个行,并且不会缩小到其中内容的大小。因此,有时我更喜欢在没有col类的情况下使用子div。另外,我可以直接将justify-content-center和align-items-center应用于行div。
所以不要这样做,
<div class="row">
<div class="col">A</div>
<div class="col">B</div>
<div class="col">C</div>
</div>
我喜欢这样做,
<div class="container">
<div class="row justify-content-center align-items-center">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</div>
直接将行用作弹性容器是好习惯吗?还是我必须在其中放入列?
我发现很难将内容居中放置在列中,因为我最终还是将其变成了弹性容器。
解决方法
理论上,几乎所有东西都可以用作flex容器,但是Bootstrap中的.row
被专门配置为具有负边距的flex容器,与.col-*
类非常匹配。因此,我建议您坚持使用这种.row
和.col-*
组合。
如果您想自己构建一个伸缩容器,可以使用d-flex
这样的Bootstrap built-in classes来快速将元素转换为伸缩框。
如果元素的父级中包含以下内容,则可以将元素垂直和水平居中放置:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
同样,也有针对这些的Bootstrap内置类:
<div class="row">
<div class="col d-flex justify-content-center align-items-center">
<p>Your Content</p>
</div>
</div>
我不确定您是否认为这足够快...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。