フィールドセットがTwitterブートストラップの下で正しくレンダリングされない

Question

Bootstrapを使用するレスポンシブサイトのページでFieldsetを使用しようとしています。実際には、GroupingTextプロパティを設定したASP.NET Panelコントロールを使用しようとしていますが、実際には凡例が同じように設定されたフィールドセットとしてレンダリングされます。ページが正しくフィールドセットを描画していません。

をしかし、ここで、それは私がブートストラップが含まれている場合、次のようになります：通常、フィールドセットであなたは、このような（ブートストラップなしで同じサイト）以下のように国境に埋め込まれた伝説を持つコンテンツの周囲に境界線を取得

私は、ブートストラップCSSがフィールドセットをやっているかを見るために見てきたが、それを引き起こしているかを把握することはできません。他の誰もブートストラップと一緒にフィールドセット（またはGroupingTextが設定されたASP.NETパネル）を使用する際に問題がありますか？誰でも、ブートストラップを使ってフィールドセットをレンダリングする方法を知っていますか？

Answer 1

これはundoutablyあなたが望んでいた答えではありませんが、私はあなたのプロジェクトでのブートストラップを含めているとき、あなたが望むようfieldsetとlegend要素をレンダリングするのに役立ちます唯一の選択肢と考えることができます：

あなたが設定できるいくつかの値を持つCSSプロパティーコールallがあります。あなたはそれをhereで読むことができます。興味のある値はinitialです。したがって、プロパティーがall: initial;のクラスは、選択された要素のすべてのプロパティを、CSS仕様で定義されている初期値にリセットします。その後、legendとfieldsetという要素をレンダリングする方法をスタイルする必要があります。私はあなたの仕事を始めるためのコードをいくつか用意しました。あなたはそれをアクションhereで見ることができます。 CSSのすべてを削除すると、この環境にブートストラップがあることに注意してください。レンダリングされたブートストラップが表示されます。

サンプル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; 
}