我想让行的div数量不确定,但是当行数太多时,我想向下浏览。
我现在有这个。
剃刀代码:
<div class="container-fluid">
<div class="row">
@foreach (Boda.Domain.Entities.Polls poll in Model.Polls)
{
<div class="col-md-3 col-lg-3 col-md-3">
<div class="header-encuesta">
<span class="text-white">@Model.Name</span>
</div>
<div class="well">
@using (Html.BeginForm("Vote", "Poll", routeValues: new { id = Model.Id, option = 0 }))
{
<ul>
@foreach (PollOptions option in Model.PollOptions)
{
<li>@Html.CheckBox(option.OptionName, false, new { onclick = "ActionVote('" + (Model.Id) + "','" + (option.Id) + "')" }) @option.OptionName</li>
}
</ul>
}
</div>
</div>
}
</div>
</div>
根据Bootstrap's doc,如果连续超过12列,则引导程序会自动将其他列包装到下一行,因此您无需对代码进行任何更改。
如果您检查此示例:http://jsfiddle.net/AndrewL32/65sf2f66/15/具有以下布局:
<div class="container-fluid">
<div class="row">
<div class="col-md-3"><div class="content"></div></div>
<div class="col-md-3"><div class="content"></div></div>
<div class="col-md-3"><div class="content"></div></div>
<div class="col-md-3"><div class="content"></div></div>
<div class="col-md-3"><div class="content"></div></div>
<div class="col-md-3"><div class="content"></div></div>
</div>
</div>
您会发现添加12列后,其余6列将自动换行到下一行。
--------从右向左而不是从左向右添加div --------
但是,如果您希望从右侧添加新添加到行中的项目,则只需为以下列添加媒体查询:
@media (min-width: 992px){
.col-md-3 {
float:right;
}
}
并且您添加的任何其他列将在右侧添加,并在添加更多列时向左移动。
这里是一个jsfiddle,在列div后面附加了[[从右到左:http://jsfiddle.net/AndrewL32/65sf2f66/17/