2017-09-01 70 views
2

我正在嘗試在使用Bootstrap的響應站點中的頁面上使用Fieldset。實際上,我正在嘗試使用帶有GroupingText屬性集的ASP.NET Panel控件 - 但實際上,它將呈現爲一個帶有圖例集的字段集,它們的設置如此相同。頁面沒有正確顯示字段集。通常情況下,有一個字段,你擺脫你的內容嵌入在邊境傳說的邊界,如以下(同一地點無引導):Fieldset在Twitter下無法正確呈現引導程序

enter image description here

但這裏是什麼樣子,如果我有引導:

enter image description here

我已經看了,看看有什麼引導CSS與字段集做什麼,但無法弄清楚什麼導致它。任何人都有使用fieldset(或填充了GroupingText的ASP.NET面板)與Bootstrap結合的問題?任何人都知道如何讓Bootstrap正常渲染fieldset?

回答

2

這將undoutably不是回答你所希望看到的,但我能想到的只有一個選項,這將有助於使fieldsetlegend元素,只要你想,當你包括你的項目引導的:

有一個CSS屬性調用all,它有幾個值可以在其上設置。你可以閱讀它here。您感興趣的價值是initial。因此,具有屬性all: initial;的類將按照CSS規範中的定義將所有選定元素的屬性重置爲其初始值。之後,您必須將legendfieldset元素設置爲您希望渲染的方式。我已經提供了一些可以幫助您入門的工作代碼。你可以看到它在行動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; 
} 
+0

謝謝!我應用這個唯一的問題是,ASP.NET Panel控件使用GroupingText屬性創建字段集,將CssClass屬性設置爲「重置 - 此重做字段集」不會將樣式應用於圖例。爲了實現這個功能,我在頁面樣式中使用了以下內容:(請參見下一個註釋) –

+1

/*以下是使用Bootstrap正確呈現字段集(具有GroupingText屬性集的Panel控件)所需的:*/ fieldset { 全部:最初; 邊框:1px純黑色; padding:5px 20px 10px 10px; font-family:Arial; font-size:12px; } 傳說{ all:initial; 顏色:黑色; font-family:Arial; font-size:12px; } –