html – Bootstrap将div内容推送到新行

发布时间:2019-11-09 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了html – Bootstrap将div内容推送到新行脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
不知怎的,我无法得出如何完成我的代码,我格式化为一个列表,需要格式化为网格,这是由javascript切换。

下面的HTML代码用于列出内容

<div class="list">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Right is next DIV</div>
        <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Right is next DIV</div>
        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
    </div>
</div>

列表的CSS代码。所有其他CSS都是由引导引用的

.styled_view div.list {
    padding: 0;
    width: 100%;
}

应使用相同的代码显示网格

<div class="grid">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Under me should be a DIV</div>
        <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Under me should be a DIV</div>
        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
    </div>
</div>

网格的CSS

.styled_view div.grid {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    width: 19.4%;
}

画廊的每个部分的19.4%保持下一个DIVs。它不会推到新的一行。我该怎么解决?

解决方法

做一个div div

喜欢这个

<div class="grid">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Under me should be a DIV</div>
        <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Under me should be a DIV</div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
    </div>
</div>

总结

以上是脚本之家为你收集整理的html – Bootstrap将div内容推送到新行全部内容,希望文章能够帮你解决html – Bootstrap将div内容推送到新行所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

标签: