对齐 Bootstrap 中的列。第一个瓷砖需要大

Question

我想使用 Bootstrap 创建一组图块 3. 在页面加载时，我从服务器获取名称列表，然后对名称执行 foreach 以创建网格。现在我已经实现了所有瓷砖的大小相同。它看起来像这样。

但我真正需要的是

第一个tile需要是col-6，剩下的col-6需要四个都占据，然后剩下的都是col-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>
    }
}

Answer 1

我觉得PHP更舒服，提问者不关心，那我怎么解决PHP，一般来说，当然：

//Array declaration *ignore*
$array = [1,2,3,4,5,6,7,8,9];
//Index Creation
$i=0;
//String to store results
$myResult = "";
foreach($array as $divs){
    if($i == 0 || $i>0 && $i<=4){
        $myResult .="<div class='col-md-6'>your content here</div>";
    }else{
        $myResult .="<div class='col-md-3'>your content here</div>";
    }

    if($i==0){
        $myResult .="<div class='col-md-6'>";
    }elseif($i == 4){
        $myResult .= "</div>";
    }
    $i++;
}

结果：

<div class='col-md-6'>your content here</div>
<div class='col-md-6'>
    <div class='col-md-6'>your content here</div>
    <div class='col-md-6'>your content here</div>
    <div class='col-md-6'>your content here</div>
    <div class='col-md-6'>your content here</div>
</div>
<div class='col-md-3'>your content here</div>
<div class='col-md-3'>your content here</div>
<div class='col-md-3'>your content here</div>
<div class='col-md-3'>your content here</div>

Answer 2

您可以通过以下方式轻松做到这一点，

@foreach (var blog in blogmaster.Children)
{
    if (blog.name == "Product Path")
    {
        <div class="col-md-6">
            <div style="background-color: #@blog.GetPropertyValue("backgroundColor");  height: 500px; margin-right: 5px">
                <h4 style="padding-top: 32px; padding-left: 10px; font-weight: 300;">@blog.name</h4>
            </div>
        </div>
    }
    else
    {
        <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>
    }
}

只需获取第一项并将其 class 分配为 col-md-6，其他分配为 col-md-3。因为我没有你的数据集，所以我使用我自己的具有相同颜色的简单数据集。输出是这样的，

Answer 3

NB: My Umbraco code may contain errors. But I hope I convey the idea that you can use.

1) 你可以改进你的布局

考虑两行小块之间的间隙计算大块的高度
不需要嵌套块，因为你计算了大块的高度，所有块都向左浮动

请检查布局：

@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 属性应用于第二个大块。为此，我定义了一个新的特殊 class .pull-md-right。它类似于 the .pull-right class.

请检查新布局：
jsfiddle • codepen

@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++;
    }
}

对齐 Bootstrap 中的列。第一个瓷砖需要大

Align columns in Bootstrap. The first tile needs to be large

css

c#

umbraco

twitter-bootstrap

twitter-bootstrap-3

1) 你可以改进你的布局

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

3) 如果需要重复大块

4) 如果右侧也需要大块