Question

我遇到的问题是我的DIV元素没有使用Bootstrap正确包装。我把它设置为只创建元素然后让bootstrap为我处理行这是我得到的结果......

对于模糊的图像感到抱歉，我不知道我的公司是否希望我在块中共享数据

正如你所看到的，它就好像在一个元素中有一个推/拉使它跳过3个点。注意：当窗口改变大小时，此点会发生变化，因此可能存在多个间隙或只是像这样的大间隙。

我认为它与盒子的高度有关，但我不确定。如果我设置硬编码高度（如20em;），那么它似乎工作正常。但是，由于内容在成品中不断变化，我不想设置高度。也许有人知道一个CSS技巧。我已经尝试了大多数＆＃34; clearfix＆＃34;解决方案，但没有运气。

父代码（删除了一些代码以节省空间）：

<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>
}

提前致谢！

编辑：删除了截图

FIX：将.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; } }

Answer 1

以下是基于您提供的代码的示例。由于您使用了多个列断点（col-md-3和col-sm-6），因此您必须清除浮点数，以确定相应断点处的列数：

col-md-3 = 4列@min-width：992px

col-sm-6 = 2列@ max-width：991px

请参阅FullPage上的工作示例代码段并缩小视口。

/**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>

Answer 2

我通常不愿意为这样的问题推荐一个插件，但是在你想要的列中排列可变高度卡片并不是很好的跨浏览器兼容方式。 Masonry是最常见的解决方案 - 我会调查一下。它使用起来非常简单：

$('.row').masonry({
  // options
  itemSelector: '.card',
  columnWidth: 200
});

使用bootstrap的奇怪行行为 - 帮我纠正它

2 个答案: