8

このASP.NETMVC3プロジェクトでは、Twitter Bootstrapの実験を開始したばかりですが、<fieldset>凡例のレンダリングが混乱していることに気付きました。ここでレンダリングされている凡例はどうなっていますか？また、通常の状態に戻すにはどうすればよいですか？つまり、右の線を再び左の線と垂直に揃えたいのです。

左側に標準の凡例レンダリング、pre-Bootstrap、右側にBootstrapの影響を受けるレンダリング：

通常の凡例 Twitterブートストラップの伝説

更新： 少なくとも、レンダリングが壊れている原因を突き止めました。Bootstrapは、凡例のwidthプロパティを100％に変更し、border-bottomプロパティを「1pxsolid」に変更します。これにより、凡例の右側の元の境界線が消去され、代わりにその下の境界線が表示されます。問題は、これがどのように機能することを意味するかです。たぶんMVCのCSS（Site.css）がBootstrapのCSSに干渉しているのでしょうか？

4

1 に答える 1

8

ブートストラップが最後になるようにスタイルシート宣言を切り替えると、問題が修正されるはずです。

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />

ブートストラップスタイル

fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 27px;
    font-size: 19.5px;
    line-height: 36px;
    color: #333;
    border: 0;
    border-bottom: 1px solid #E5E5E5;
}

デフォルトのMVCStyle.cssスタイル 

fieldset {
    border: 1px solid #DDD;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

最終結果は次のようになります。

ここに画像の説明を入力してください

vsその逆（最後に宣言されたMVCデフォルトスタイル）

ここに画像の説明を入力してください

または、MVCスタイルシートを完全に削除し、必要なカスタムスタイルとともにブートストラップを使用します。

于 2012-07-13T18:54:17.613 に答える