如何让ui-grid的角变圆？
Listview 有一个 data-inset 属性可以使其角变圆。但是，我无法使用列表视图，因为我的列表是嵌套列表，并且框架的默认行为是隐藏嵌套列表并在单击其主列表后显示它。因此，我选择在主列表视图行内使用 ui-grid 视图，如下所示：
<ul data-role="listview">
<li><h1 class="ui-title" role="heading" aria-level="1">Completeness</h1></li>
<li>
<div class="ui-grid-b">
<div>Secondary Title</div>
<div>Content.....</div>
<div>Blah Blah</div>
</div
</li>
<li>Footer</li>
</ul>
我的问题是 ui-grid 的角应该是圆角的。我尝试将 data-inset="true" 设置为“true”，但没有成功。
Listview has a data-inset property to make its corners rounded. However, I can't use listview because my list is a nested list and the frameworks default behavior is hide the nested list and show it once the its primary list is clicked. So, I chose to use a ui-grid view inside the primary listview row which looks like below:
<ul data-role="listview">
<li><h1 class="ui-title" role="heading" aria-level="1">Completeness</h1></li>
<li>
<div class="ui-grid-b">
<div>Secondary Title</div>
<div>Content.....</div>
<div>Blah Blah</div>
</div
</li>
<li>Footer</li>
</ul>
My problem is the ui-grid's corners should be rounded. I tried to put data-inset="true" but didn't work.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以使用 jQuery Mobile 添加到小部件的类，在本例中，您正在寻找 ui-corner-all 类，该类将角放在所有四个角上，然后您可能需要 < code>box-shadow that
ui-shadow适用：我添加了填充，因为网格元素默认情况下没有任何填充。还有 ui-corner-top 和 ui-corner-bottom 类，它们仅围绕它们所应用的元素的顶部/底部。
这是一个演示： http://jsfiddle.net/VXrxv/
如果您想舍入
li元素是ui-grid元素的父元素，您可以向它们添加margin：这是一个演示：http://jsfiddle.net/VXrxv/1/
You can use the classes that jQuery Mobile adds to widgets, in this case you're looking for the
ui-corner-allclass which puts corners on all four corners, and then you will probably want thebox-shadowthatui-shadowapplies:I added the padding because the grid element didn't have any by default. Also there are the
ui-corner-topandui-corner-bottomclasses that only round the top/bottom of the element to which they are applied.Here is a demo: http://jsfiddle.net/VXrxv/
If instead you want to round the
lielement that is the parent of theui-gridelement you can addmarginto them:Here is a demo: http://jsfiddle.net/VXrxv/1/
尝试使用 css 属性
border-radius。例如，尝试border-radius: 0.5em 0.5em;Try with css property
border-radius. For example, tryborder-radius: 0.5em 0.5em;在 Bootstrap 上进行舍入；
这对我来说似乎是最快的解决方案；
使用以下 div 包裹雾部件
On the Bootstrap the rounding is effected;
This seems to be the quickest solution for me;
Wrap mist widgets with the following div