相关疑难解决方法(0)

我遇到了一种情况,我被要求不限制一行中的列数,因为可能会有多个内容块从admin中的位置添加到该区域.

默认情况下,BS3的行为告诉12列div不浮动,这导致它们越过较小的浮动div的顶部.所以我写了一个覆盖作为我的系统的类,并认为我会分享以防其他人有问题.

如果有人有更好的想法或建议,我很乐意觉得我不是黑客入侵Bootstrap ......但这就是我如何解决它.

  /* col-xs float fix for large column groups */  
  .large-group .col-xs-12 {
    float: left;    
  }

  /* col-sm float fix for large column groups */    
  @media (min-width: 768px) {    
    .large-group .col-sm-12 {    
      float: left;    
    }    
  }

  /* col-md float fix for large column groups */    
  @media (min-width: 992px) {    
    .large-group .col-md-12 {    
      float: left;    
    }    
  }

  /* col-lg float fix for large column groups */    
  @media (min-width: 1200px) {
    .large-group .col-lg-12 {    
      float: left;    
    }    
  }

<div …

我使用以下HTML代码:

<div id="list">
    <div class="row">
        <div class="col-md-3">1</div>
        <div class="col-md-3">2</div>
        <div class="col-md-3">3</div>
        <div class="col-md-3">n-times</div> 
    </div>
</div>

因此,我需要在页面底部按水平显示一行无限列.

我怎样才能做到这一点？

所以,我试图width为list容器设置固定并设置overflow-x: auto

我真的不知道如何用言语表达.

当我连续有2个div时,每个都有不同的高度,所以下一行有不需要的空间.

但是在小屏幕中正确堆叠.

 <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12"> div 1 </div>
    <div class="col-lg-6 col-md-6 col-sm-12"> div 2 </div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12"> div 3 </div>
    <div class="col-lg-6 col-md-6 col-sm-12"> div 4 </div>
  </div>

但是当我删除行并将所有div放在左边的1 div中,而所有div放在1 div内的右边时,没有空格.

但是它们在小屏幕上的排列顺序错误.

  <div class="col-lg-6 col-md-6 col-sm-12">
    <div> div 1 </div>
    <div> div 3 </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-12">
    <div> div 2 </div>
    <div> div 4 </div>
  </div>

请注意,它们不仅仅是4个div,它们至少是8个.

我希望这很清楚.我感谢任何帮助.

我是引导程序和响应式设计概念的新手.

我正在阅读bootstrap文档并阅读w3schools的一些教程.所有提及col-必须在一个row班级中= 12 .他们还提到你可以结合不同的col类和大小的例子<div class="col-md-3 col-xs-6">

我没有得到的是</row>当你将不同的东西组合在一起时,你应该什么时候打破视口col sizes？

请考虑以下内容,我希望移动设备显示2行和2列,在桌面上显示包含4行的单个列

<div class="container">
            <div class="row">

                <div class="col-md-3 col-xs-6">
                </div>

                <div class="col-md-3 col-xs-6">
                </div>

                <div class="col-md-3 col-xs-6">
                </div>

                <div class="col-md-3 col-xs-6">
                </div>

           </div><!--/row -->
       </div><!--/container -->  

考虑到内部的所有列rows必须= 12,行类需要在移动和桌面的不同点上关闭......？

我如何解决上述问题,希望这个问题有道理.

谢谢

如果我连续放置12列以上会怎样？

Bootstrap文档中对此有任何解释吗？