本文介绍了在引导数据库中对齐列。第一个切片需要很大的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用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)您可以改进布局
根据两排小块之间的间隙计算大块的高度。
您不需要嵌套的块，因为您已经计算了大块的高度，并且所有块都向左浮动。
请检查布局：
数据-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
@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++;
}
}
这篇关于在引导数据库中对齐列。第一个切片需要很大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！