在引导数据库中对齐列。第一个切片需要很大 [英] Align columns in Bootstrap. The first tile needs to be large

问题描述

我想使用Bootstrap 3创建一组瓷砖。在页面加载时，我从服务器获得一个名称列表，并对这些名称执行Foreach操作以创建网格。现在，我已经实现了所有瓷砖的大小相等。它看起来像这样。

但我真正需要的是

第一个块需要是ol-6，剩余的ol-6需要由其中四个块占用，然后所有剩余的块都将是ol-3。

当数据循环通过时，我如何动态执行此操作？

这是我的现有代码，其中的磁贴大小相同。

@foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog")))
{
    foreach (var blog in blogmaster.Children)
    {
        <div class="col-md-3">
            <div style="background-color: #@blog.GetPropertyValue("backgroundColor"); height: 250px; margin-right: 5px">
                <h4 style="padding-top: 32px; padding-left: 10px; font-weight: 300;">@blog.Name</h4>
            </div>
        </div>
    }
}

推荐答案

注意：我的Umbro代码可能包含错误。但我希望我能传达你可以利用的想法。

1)您可以改进布局

1. 根据两排小块之间的间隙计算大块的高度。

2. 您不需要嵌套的块，因为您已经计算了大块的高度，并且所有块都向左浮动。

请检查布局：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.blog > div {
  padding: 0;
  padding-top: 5px;
}
@media (min-width: 992px) {
  .blog > div {
    padding-right: 5px;
  }
}
.blog > .col-md-3 > div {
  background: lightblue;
  height: 250px; 
}
.blog > .col-md-6 > div {
  background: orange;
  height: 505px; /* = 2 * col-md-3 + padding-top */
}
.blog h4 {
  font-weight: 300;
  margin-top: 0;
  padding-left: 10px; 
  padding-top: 32px; 
}

<div class="container-fluid">
  <div class="row blog">
    <div class='col-md-6'><div><h4>@blog.Name</h4></div></div>
    
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>

    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
  </div>
</div>

2)如果第一个块必须很大

@foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog"))) 
{
    var isFirst = true;

    foreach (var blog in blogmaster.Children) 
    {

        <div class="col-md-@(isFirst ? 6 : 3)">
            <div style="background-color: #@blog.GetPropertyValue("backgroundColor");">
                <h4>@blog.Name</h4>
            </div>
        </div>

        isFirst = false;
    }
}

3)如果需要重复大块

@foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog"))) 
{
    var i = 0;

    foreach (var blog in blogmaster.Children) 
    {

        <div class="col-md-@(i % 9 == 0 ? 6 : 3)">
            <div style="background-color: #@blog.GetPropertyValue("backgroundColor");">
                <h4>@blog.Name</h4>
            </div>
        </div>

        i++;
    }
}

4)如果右侧也需要较大的块

当屏幕宽度变为992px或更大时，将float: right属性应用于第二个大块。为此，我定义了一个新的特殊类.pull-md-right。它是the .pull-right class的类比。

请检查新布局：
jsfiddle ；&bull；codepen

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.blog > div {
  padding: 0;
  padding-top: 5px;
}
@media (min-width: 992px) {
  .blog > div {
    padding-right: 5px;
  }
  .pull-md-right {
    float: right !important;
  }
}
.blog > .col-md-3 > div {
  background: lightblue;
  height: 250px; 
}
.blog > .col-md-6 > div {
  background: orange;
  height: 505px; /* = 2 * col-md-3 + padding-top */
}
.blog h4 {
  font-weight: 300;
  margin-top: 0;
  padding-left: 10px; 
  padding-top: 32px; 
}

<div class="container-fluid">
  <div class="row blog">
    <div class='col-md-6'><div><h4>@blog.Name</h4></div></div>
    
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>

    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>

    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-6 pull-md-right'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>

    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
  </div>
</div>

代码可以是这样的。

@foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog"))) 
{
    var i = 0;

    foreach (var blog in blogmaster.Children) 
    {

        if (i % 18 == 0)
        {
            <div class="col-md-6">
        }
        else if (i % 18 == 11)
        {
            <div class="col-md-6 pull-right">
        }
        else 
        {
            <div class="col-md-3">
        }

                <div style="background-color: #@blog.GetPropertyValue("backgroundColor");">
                    <h4>@blog.Name</h4>
                </div>
            </div>

        i++;
    }
}

这篇关于在引导数据库中对齐列。第一个切片需要很大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！