asp.net-mvc-3 - 在kendo自定义工具栏中,如何添加换行符/换行符

  显示原文与译文双语对照的内容

@(Html.Kendo().Grid<ModelVM>()
.Name("ModelVM")
.HtmlAttributes(new { style ="padding: 0px; margin: 0px;height:100%" })
.ToolBar(toolbar =>
{
 toolbar.Custom()
. Text("First").HtmlAttributes(new { id ="someid" })
. Action("Index2","Home");
 toolbar.Custom()
. Text("Second")
. Action("Index2","Home");
 toolbar.Custom()
. Text("Third")
. Action("Index3","Home");
 toolbar.Custom()
. Text("Fourth")
. Action("Index4","Home");
 toolbar.Custom()
. Text("Fifth")
. Action("Index5","Home");
 toolbar.Custom()
. Text("Sixth")
. Action("Index6","Home");
. 
. 
. 
} )

我遇到了简单的问题。 如果太简单了,抱歉。 我的问题是我想让"第六个"定制工具栏出现在新行。 如何这样做或者如何在剑桥ui工具栏中插入换行/新行。 先谢谢了。

时间: 作者:

你可以使用HTML标记来执行类似的操作并应用所需的任何样式。


.ToolBar(toolbar =>
{
 toolbar.Template(@<text>
 <div class="toolbar">
 <a href="Index">Index</a> <p>
 <a href="Index2">Index2</a> <p>
 <a href="Index3">Index3</a> <p>
. . .
 </div>
 </text>);
})

作者:

我不熟悉Kendo工具栏所以我不确定它呈现的html,但你可以使用css与psuedo元素。 例如如果仅仅呈现一系列 <a> 标记,这些标记通常在一行中呈现


<div>
 <a href="#">First</a>
 <a href="#">Second</a>
 <a href="#">Third</a>
 <a href="#">Fourth</a>
 <a href="#">Fifth</a>
</div>

接下来,将把 4th 和 5th 元素强制到新行


a:nth-child(4):before {
 content: 'a';
 white-space: pre;
}

看起来你使用的are可以替换 a:nth-child(4):before,但也可以能取决于是否还生成了任何封闭元素。

指小提琴。

作者:
...