[asp.net]与动态 div 引导灵活行

标签: Asp.net HTML Razor CSS
发布时间: 2017/3/26 3:05:33
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想要有数目不详的 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>

enter image description here

解决方法 1:

根据引导的 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;
    }
}

您添加的任何其他列将追加从右和向左走,当您添加更多的列。

这里是与列 div从右向左附加 jsfiddle: http://jsfiddle.net/AndrewL32/65sf2f66/17/

官方微信
官方QQ群
31647020