不规则的引导列包装

Posted 2023-03-06

【中文标题】不规则的引导列包装

【英文标题】：Irregular bootstrap column wrapping

【发布时间】：2014-10-25 06:18:41

【问题描述】：

使用最新版本的 haml、haml-rails、sass 和 bootstrap-sass 运行 Rails 4.1.4。对于用户显示，我的 HAML 是这样的：

.tutors-listing
    .row
      - @users.each do |tutor|
        .col-xs-12.col-md-3
          .row.tutor
            .col-xs-offset-1.col-xs-4.col-md-12
              = image_tag tutor.photo, :class => 'img-responsive img-circle tutor-photo'
              %h4.tutor-name
                = tutor.first_name

             %p
                teaches
             %strong.tutor-skills
               = tutor.teachables

但是，此标记会导致以下故障：

我希望有人能确定这里出了什么问题。在中断点处，应该有 4 列均匀。

【问题讨论】：

在这里查看我的答案：***.com/questions/24571062/…。这是一个 Bootply 演示：bootply.com/jme11/U91pZvp81q#。而且，有关“常规”响应式重置的更多详细信息：***.com/questions/24494409/…

getbootstrap.com/css/#grid-responsive-resets

【参考方案1】：

这是由 2 行或更多文本的技能造成的。这是使用float 属性时的一个众所周知的错误。这里有一张小图可以理解：

[Bootply] The issue

选项#1：强制高度

您的第一个选择是强制元素具有相同的高度：

.tutor 
    height: 500px;

[专业版] 简单易用，无处不在 [骗局] 使用幻数 [Con]限制技能行数 [Con] 修改版本上的无用空格

[Bootply] Force height

选项 #2：使用 clearfix

您的第二个选项是使用 clearfix，并强制第 5 个元素位于新行上（第 9 个、第 13 个相同......）：

.tutors-listing > .row > .col-md-3:nth-child(4n+1) 
    clear: both;

[专业]技能不限制行数 [Pro] 没有无用的空格 [专业] 没有幻数 [Con] 每个尺寸有一个 CSS 规则 (xs/sm/md/lg) [Con] 规则取决于您的网格 (.col-xx-3)

[Bootply] Clearfix

【讨论】：

很好的答案。补充一点，你可以把导师的技能放到另一个div里面，给它定义一个最小高度，这样即使内容不多，也会保持高度。

谢谢。问题不是最小高度，而是最大高度。不管min-height，如果一个元素高于它的追随者，它就会打破你的网格。

@zessx 我今天刚刚回答了一个类似的问题，并为您的第一个问题提供了或多或少相似的方法，因为这是一个非常常见的场景。就个人而言，我倾向于使用最大和最小高度的组合来更好地控制（这样我可能会提供更多的空间/间距，但在媒体查询上使用更少的编码）。但是，我想为 OP 添加另一种方法：简单地按字符（而不是单词）限制技能，以便它们始终保持相同的长度，或者强制使用最少的行数。无论哪种方式，为这个答案和解释 +1

很棒的文档，获得赏金

@vipin8169 我没有看到问题。 #2 解决方案不关心行的高度。即使它是动态更改的，它也会起作用并将整个下一行向下推。

【参考方案2】：

在我的例子中，我想在大屏幕上每行显示 3 个项目，在中屏幕上显示 2 个，在小屏幕上显示 1 个。

您还可以取消注释背景颜色以验证何时触发效果。

http://www.bootply.com/QOor73wFAY#

/* fixes for columns wrapping in odd ways due to variable height */
/* when showing 2 items per row, clear #1, 3, 5 */
@media (min-width: $screen-sm-min)
    .cell-box:nth-child(2n+1)
        clear: both;
        /* background-color: rgba(0, 0, 255, .5); /* blue */
    

/* when showing 3 items per row, clear #1, 4, 7 */
@media (min-width: $screen-md-min)
    .cell-box:nth-child(2n+1)
        clear: none;
    
    .cell-box:nth-child(3n+1)
        clear: both;
        /* background-color: rgba(0, 255, 0, .5); /* green */
    

【讨论】：

这正是我想要的。谢谢！我对其进行了修改，以将断点和“每行项目”放在一行中（循环中）。

【参考方案3】：

有时，我也会遇到这个问题。我建议尝试覆盖您不需要的任何填充或边距。尝试先将边距更改为 0。然后删除一些填充。这在我的一些案例中有所帮助。

【参考方案4】：

从外观上看，您将所有列呈现在一行中。你需要改变它 以便它每 4 列开始一个新行，即 （在普通的旧 erb 中）

  <% @users.each_slice(4).to_a.each do |chunk| %>
     <div class="row">
       <% chunk.each do |tutors| %>
         <div class="col-sm-3">
           ...
         </div>
       <% end %>
    </div>
  <% end %>

您可能不需要第一个循环中的 to_a

【讨论】：

问题是他们无法在不同的屏幕尺寸上轻松地从 3 列切换到 4 列。

感谢推荐