html - Bootstrap 的奇数行行为 - 帮助我纠正它

标签 html css twitter-bootstrap

我遇到一个问题，我的 DIV 元素没有使用 Bootstrap 正确包装。我将其设置为仅创建元素，然后让 bootstrap 为我处理行这就是我得到的结果...

抱歉图片模糊，我不知道我的公司是否要我共享 block 中的数据

Blurred image of grid issue

如您所见，它的行为就好像在那个元素中有一个推/拉使其跳过 3 个点。注意:当窗口改变大小时，这个点也会改变，所以可能会有多个间隙，或者只是像这样的一个大间隙。

我认为这与盒子的高度有关，但我不确定。如果我设置一个硬编码高度(例如 20em；)，那么它似乎工作正常。但是，我不想设置高度，因为内容在成品中不断变化。也许有人知道 CSS 技巧。我已经尝试了大多数“clearfix”解决方案，但没有成功。

父代码(为了节省空间删除了一些代码):

<div class="wrapper wrapper-content container-fluid">
<div class="row">
    @foreach (var machine in Model)
    {
        @Html.Partial("_MachineCard", machine)
    }
</div>

部分代码(为了节省空间删除了一些代码):

<div class="col-md-3 col-sm-6 col-xs-12" style="display: block">
@if (onlineStatus)
{
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            @switch (@Model.DTCodeName)
            {
                case "Unknown DTC":
                    <span class="label label-danger pull-right">@Model.DTCodeName</span>
                    break;
                case "Production":
                    <span class="label label-primary pull-right">@Model.DTCodeName</span>
                    break;
                case "Bin Change":
                    <span class="label label-info pull-right">@Model.DTCodeName</span>
                    break;
                default:
                    <span class="label label-warning pull-right">@Model.DTCodeName</span>
                    break;
            }
            <h5>@Model.MachineName</h5>
        </div>
        <div class="ibox-content">
            <h3 class="no-margins">@Model.JobName</h3>
            <div class="stat-percent font-bold text-success">
                @partCountPercentage% <i class="fa fa-bolt"></i>
            </div>
            <div class="progress" style="margin-bottom: 0.5em; margin-top: 0.5em;">
                <div style="width: @partCountPercentage%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="@partCountPercentage" role="progressbar" class="progress-bar progress-bar-success">
                    <span class="sr-only">@partCountPercentage% Complete</span>
                </div>
            </div>
            <div>@Model.PartCount / @Model.PartLimit</div>
            <div>DT Code: @Model.DTCodeName</div>
            <span><small>Cycles Per Min: @Math.Round((double)Model.RunCyclesPerProdHour / 60, 3)</small></span>
            <span class="pull-right" title="Based on current Cycle Time"><small>Est. Completion: @txtTimeLeft</small></span>
        </div>
    </div>
}
else
{
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <span class="label pull-right">Offline</span>
            <h5>@Model.MachineName</h5>
        </div>
        <div class="ibox-content">
            <h3 class="no-margins">Machine is offline</h3>
            <div>Last Active: @Model.MachineOnlineTime.Value.DateTime</div>
            <div>DT Code: @Model.DTCodeName</div>
        </div>
    </div>
}

提前致谢!

编辑: 删除了截图

修复: 将 .box 类添加到列大小类所在的顶部 div (col-xx-x)。感谢 vanburen 的修复。

@media (min-width: 1200px) { .box:nth-child(4n+1) { clear: left; } } @media (min-width: 992px) and (max-width: 1199px) { .box:nth-child(3n+1) { clear: left; } } @media (min-width: 768px) and (max-width: 991px) { .box:nth-child(2n+1) { clear: left; } }

最佳答案

这是一个基于您提供的代码的示例。由于您使用的是多个列断点(col-md-3 和 col-sm-6)，因此您必须清除归因于的列数的 float 对应的断点:

col-md-3 = 4 列@最小宽度:992px

col-sm-6 = 2 列@最大宽度:991px

查看 FullPage 上的工作示例代码段并缩小视口(viewport)。

/**FOR DEMO ONLY**/

body {
  padding-top: 25px;
}
.ibox {
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.20), 0 4px 4px rgba(0, 0, 0, 0.25);
}
/**END DEMO CSS**/

@media (min-width: 992px) {
  .box:nth-child(4n+1) {
    clear: left;
  }
}
@media (max-width: 991px) {
  .box:nth-child(2n+1) {
    clear: left;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper wrapper-content container-fluid">
  <div class="row">

    <div class="col-md-3 col-sm-6 box">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-danger pull-right">DTCodeName</span>
          <span class="label label-primary pull-right">DTCodeName</span>
          <span class="label label-info pull-right">DTCodeName</span>
          <span class="label label-warning pull-right">DTCodeName</span>
          <h5>MachineName 1</h5>
        </div>
        <div class="ibox-content">
          <h3 class="no-margins">JobName</h3>
          <div class="stat-percent font-bold text-success">
            partCountPercentage <i class="fa fa-bolt"></i>
          </div>
          <div class="progress" style="margin-bottom: 0.5em; margin-top: 0.5em;">
            <div style="width: @partCountPercentage%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="@partCountPercentage" role="progressbar" class="progress-bar progress-bar-success">
              <span class="sr-only">partCountPercentage Complete </span>
            </div>
          </div>
          <div>PartLimit</div>
          <div>DT Code</div>
          <span><small>Cycles Per Min:</small></span>
          <span class="pull-right" title="Based on current Cycle Time"><small>Est. Completion</small></span>
        </div>
      </div>
    </div>

    <div class="col-md-3 col-sm-6 box">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-danger pull-right">DTCodeName</span>
          <span class="label label-primary pull-right">DTCodeName</span>
          <span class="label label-info pull-right">DTCodeName</span>
          <span class="label label-warning pull-right">DTCodeName</span>
          <h5>MachineName 2</h5>
        </div>
        <div class="ibox-content">
          <h3 class="no-margins">JobName JobName JobName JobName JobName</h3>
          <div class="stat-percent font-bold text-success">
            partCountPercentage <i class="fa fa-bolt"></i>
          </div>
          <div class="progress" style="margin-bottom: 0.5em; margin-top: 0.5em;">
            <div style="width: @partCountPercentage%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="@partCountPercentage" role="progressbar" class="progress-bar progress-bar-success">
              <span class="sr-only">partCountPercentage Complete</span>
            </div>
          </div>
          <div>PartLimit</div>
          <div>DT Code</div>
          <span><small>Cycles Per Min:</small></span>
          <span class="pull-right" title="Based on current Cycle Time"><small>Est. Completion</small></span>
        </div>
      </div>
    </div>

    <div class="col-md-3 col-sm-6 box">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-danger pull-right">DTCodeName</span>
          <span class="label label-primary pull-right">DTCodeName</span>
          <span class="label label-info pull-right">DTCodeName</span>
          <span class="label label-warning pull-right">DTCodeName</span>
          <h5>MachineName 3</h5>
        </div>
        <div class="ibox-content">
          <h3 class="no-margins">JobName JobName JobName JobName JobName JobName JobName</h3>
          <div class="stat-percent font-bold text-success">
            partCountPercentage <i class="fa fa-bolt"></i>
          </div>
          <div class="progress" style="margin-bottom: 0.5em; margin-top: 0.5em;">
            <div style="width: @partCountPercentage%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="@partCountPercentage" role="progressbar" class="progress-bar progress-bar-success">
              <span class="sr-only">partCountPercentage Complete</span>
            </div>
          </div>
          <div>PartLimit</div>
          <div>DT Code</div>
          <span><small>Cycles Per Min:</small></span>
          <span class="pull-right" title="Based on current Cycle Time"><small>Est. Completion</small></span>
        </div>
      </div>
    </div>

    <div class="col-md-3 col-sm-6 box">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-danger pull-right">DTCodeName</span>
          <span class="label label-primary pull-right">DTCodeName</span>
          <span class="label label-info pull-right">DTCodeName</span>
          <span class="label label-warning pull-right">DTCodeName</span>
          <h5>MachineName 4</h5>
        </div>
        <div class="ibox-content">
          <h3 class="no-margins">JobName JobName JobName</h3>
          <div class="stat-percent font-bold text-success">
            partCountPercentage <i class="fa fa-bolt"></i>
          </div>
          <div class="progress" style="margin-bottom: 0.5em; margin-top: 0.5em;">
            <div style="width: @partCountPercentage%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="@partCountPercentage" role="progressbar" class="progress-bar progress-bar-success">
              <span class="sr-only">partCountPercentage Complete</span>
            </div>
          </div>
          <div>PartLimit</div>
          <div>DT Code</div>
          <span><small>Cycles Per Min:</small></span>
          <span class="pull-right" title="Based on current Cycle Time"><small>Est. Completion</small></span>
        </div>
      </div>
    </div>

    <div class="col-md-3 col-sm-6 box">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-danger pull-right">DTCodeName</span>
          <span class="label label-primary pull-right">DTCodeName</span>
          <span class="label label-info pull-right">DTCodeName</span>
          <span class="label label-warning pull-right">DTCodeName</span>
          <h5>MachineName 5</h5>
        </div>
        <div class="ibox-content">
          <h3 class="no-margins">JobName</h3>
          <div class="stat-percent font-bold text-success">
            partCountPercentage <i class="fa fa-bolt"></i>
          </div>
          <div class="progress" style="margin-bottom: 0.5em; margin-top: 0.5em;">
            <div style="width: @partCountPercentage%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="@partCountPercentage" role="progressbar" class="progress-bar progress-bar-success">
              <span class="sr-only">partCountPercentage Complete</span>
            </div>
          </div>
          <div>PartLimit</div>
          <div>DT Code</div>
          <span><small>Cycles Per Min:</small></span>
          <span class="pull-right" title="Based on current Cycle Time"><small>Est. Completion</small></span>
        </div>
      </div>
    </div>

    <div class="col-md-3 col-sm-6 box">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-danger pull-right">DTCodeName</span>
          <span class="label label-primary pull-right">DTCodeName</span>
          <span class="label label-info pull-right">DTCodeName</span>
          <span class="label label-warning pull-right">DTCodeName</span>
          <h5>MachineName 6</h5>
        </div>
        <div class="ibox-content">
          <h3 class="no-margins">JobName</h3>
          <div class="stat-percent font-bold text-success">
            partCountPercentage <i class="fa fa-bolt"></i>
          </div>
          <div class="progress" style="margin-bottom: 0.5em; margin-top: 0.5em;">
            <div style="width: @partCountPercentage%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="@partCountPercentage" role="progressbar" class="progress-bar progress-bar-success">
              <span class="sr-only">partCountPercentage Complete</span>
            </div>
          </div>
          <div>PartLimit</div>
          <div>DT Code</div>
          <span><small>Cycles Per Min:</small></span>
          <span class="pull-right" title="Based on current Cycle Time"><small>Est. Completion</small></span>
        </div>
      </div>
    </div>

    <div class="col-md-3 col-sm-6 box">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-danger pull-right">DTCodeName</span>
          <span class="label label-primary pull-right">DTCodeName</span>
          <span class="label label-info pull-right">DTCodeName</span>
          <span class="label label-warning pull-right">DTCodeName</span>
          <h5>MachineName 7</h5>
        </div>
        <div class="ibox-content">
          <h3 class="no-margins">JobName JobName JobName JobName JobName JobName JobName JobName JobName JobName JobName</h3>
          <div class="stat-percent font-bold text-success">
            partCountPercentage <i class="fa fa-bolt"></i>
          </div>
          <div class="progress" style="margin-bottom: 0.5em; margin-top: 0.5em;">
            <div style="width: @partCountPercentage%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="@partCountPercentage" role="progressbar" class="progress-bar progress-bar-success">
              <span class="sr-only">partCountPercentage Complete</span>
            </div>
          </div>
          <div>PartLimit</div>
          <div>DT Code</div>
          <span><small>Cycles Per Min:</small></span>
          <span class="pull-right" title="Based on current Cycle Time"><small>Est. Completion</small></span>
        </div>
      </div>
    </div>

    <div class="col-md-3 col-sm-6 box">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-danger pull-right">DTCodeName</span>
          <span class="label label-primary pull-right">DTCodeName</span>
          <span class="label label-info pull-right">DTCodeName</span>
          <span class="label label-warning pull-right">DTCodeName</span>
          <h5>MachineName 8</h5>
        </div>
        <div class="ibox-content">
          <h3 class="no-margins">JobName JobName JobName JobName</h3>
          <div class="stat-percent font-bold text-success">
            partCountPercentage <i class="fa fa-bolt"></i>
          </div>
          <div class="progress" style="margin-bottom: 0.5em; margin-top: 0.5em;">
            <div style="width: @partCountPercentage%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="@partCountPercentage" role="progressbar" class="progress-bar progress-bar-success">
              <span class="sr-only">partCountPercentage Complete</span>
            </div>
          </div>
          <div>PartLimit</div>
          <div>DT Code</div>
          <span><small>Cycles Per Min:</small></span>
          <span class="pull-right" title="Based on current Cycle Time"><small>Est. Completion</small></span>
        </div>
      </div>
    </div>

    <div class="col-md-3 col-sm-6 box">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-danger pull-right">DTCodeName</span>
          <span class="label label-primary pull-right">DTCodeName</span>
          <span class="label label-info pull-right">DTCodeName</span>
          <span class="label label-warning pull-right">DTCodeName</span>
          <h5>MachineName 9</h5>
        </div>
        <div class="ibox-content">
          <h3 class="no-margins">JobName</h3>
          <div class="stat-percent font-bold text-success">
            partCountPercentage <i class="fa fa-bolt"></i>
          </div>
          <div class="progress" style="margin-bottom: 0.5em; margin-top: 0.5em;">
            <div style="width: @partCountPercentage%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="@partCountPercentage" role="progressbar" class="progress-bar progress-bar-success">
              <span class="sr-only">partCountPercentage Complete</span>
            </div>
          </div>
          <div>PartLimit</div>
          <div>DT Code</div>
          <span><small>Cycles Per Min:</small></span>
          <span class="pull-right" title="Based on current Cycle Time"><small>Est. Completion</small></span>
        </div>
      </div>
    </div>


  </div>
</div>

关于html - Bootstrap 的奇数行行为 - 帮助我纠正它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35342540/

上一篇：html - animate.css 仅在添加 "infinite"时有效

下一篇：css - 如何在 bootstrap 3 的特定屏幕宽度上禁用元素属性

相关文章：

javascript - 基本的 Javascript 问题(增值)

html - 如何将内容放在 Bootstrap 导航的右侧

javascript - div标签对齐问题

javascript - 我想如果有 2 个元素具有相同的文本，一个在 jquery 中被删除

css - 如何使用 angular 5 在 SPA 中使用多个主题

css - Bootstrap : how to change width of container

jquery - 如何旋转伪元素的背景图像？

css - 防止导航栏菜单换行

html - Bootstrap 行全宽

jquery - 为什么 dragleave 事件意外触发？

©2024 IT工具网  联系我们