Fieldset在Twitter下无法正确呈现引导程序
问题描述:
我正在尝试在使用Bootstrap的响应站点中的页面上使用Fieldset。实际上,我正在尝试使用带有GroupingText属性集的ASP.NET Panel控件 - 但实际上,它将呈现为一个带有图例集的字段集,它们的设置如此相同。页面没有正确显示字段集。通常情况下,有一个字段,你摆脱你的内容嵌入在边境传说的边界,如以下(同一地点无引导):Fieldset在Twitter下无法正确呈现引导程序
但这里是什么样子,如果我有引导:
我已经看了,看看有什么引导CSS与字段集做什么,但无法弄清楚什么导致它。任何人都有使用fieldset(或填充了GroupingText的ASP.NET面板)与Bootstrap结合的问题?任何人都知道如何让Bootstrap正常渲染fieldset?
答
这将undoutably不是回答你所希望看到的,但我能想到的只有一个选项,这将有助于使fieldset
和legend
元素,只要你想,当你包括你的项目引导的:
有一个CSS属性调用all
,它有几个值可以在其上设置。你可以阅读它here。您感兴趣的价值是initial
。因此,具有属性all: initial;
的类将按照CSS规范中的定义将所有选定元素的属性重置为其初始值。之后,您必须将legend
和fieldset
元素设置为您希望渲染的方式。我已经提供了一些可以帮助您入门的工作代码。你可以看到它在行动here。请注意,如果你删除了所有的CSS,bootstrap就在这个环境中,你会看到引导样式呈现。
样本HTML:
<fieldset class="reset-this redo-fieldset" style="margin-left: 10px;">
<legend class="reset-this redo-legend">Name</legend>
First Name: <input type="text"><br>
Last Name: <input type="text"><br>
</fieldset>
样品CSS:
.reset-this {
all: initial;
}
.redo-fieldset {
border: 1px solid black;
padding : 10px;
}
.redo-legend {
color: black;
}
谢谢!我应用这个唯一的问题是,ASP.NET Panel控件使用GroupingText属性创建字段集,将CssClass属性设置为“重置 - 此重做字段集”不会将样式应用于图例。为了实现这个功能,我在页面样式中使用了以下内容:(请参见下一个注释) –
/*以下是使用Bootstrap正确呈现字段集(具有GroupingText属性集的Panel控件)所需的:*/ fieldset { 全部:最初; 边框:1px纯黑色; padding:5px 20px 10px 10px; font-family:Arial; font-size:12px; } 传说{ all:initial; 颜色:黑色; font-family:Arial; font-size:12px; } –