html - 使用动态 div Bootstrap 灵活的行

Question

我想要一行有未确定数量的 div，但当它太多时我想下降。

我现在有这个。

Razor 代码:

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

Answer 1

根据 Bootstrap's doc ，如果一行中超过 12 列，bootstrap 会自动将额外的列换行到下一行，因此您无需对代码进行任何更改。

如果你检查这个例子: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/