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

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

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

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

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

  1. .styled_view div.list {
  2. padding: 0;
  3. width: 100%;
  4. }

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

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

网格的CSS

  1. .styled_view div.grid {
  2. display: inline-block;
  3. overflow: hidden;
  4. vertical-align: top;
  5. width: 19.4%;
  6. }

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

解决方法

做一个div div

喜欢这个

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

猜你在找的HTML相关文章