Twitter Bootstrap änderungen rendering der fieldset-Legende, warum?

In diesem ASP.NET MVC 3-Projekt, ich habe gerade angefangen, Experimentieren mit Twitter Bootstrap, aber ich merke, es verwirrt mit der übergabe des <fieldset> Legenden. Was ist geschehen, um die Legende rendering hier, und wie bekomme ich es wieder normal? Das heißt, ich will die richtige Linie, um vertikal ausgerichtet sein, die mit der linken Linie wieder.

Die standard-Legende rendering, pre-Bootstrap, Links, Bootstrap-betroffenen rendering rechts:

Twitter Bootstrap änderungen rendering der fieldset-Legende, warum?

Update:
Ich habe herausgefunden, was die Ursache der gebrochenen rendering, mindestens: Bootstrap Veränderungen der Legende width-Eigenschaft auf 100% und die border-bottom-Eigenschaft auf '1px solid'. Dies bewirkt, dass die ursprüngliche Grenze in den rechten der Legende gelöscht werden und eine Grenze unterhalb angezeigt, statt. Die Frage ist, wie dies gemeint ist, um zu arbeiten. Vielleicht MVC CSS ("Website".css) stört, dass der Bootstrap?

  • dies könnte eine Breite Frage. Versuchen Sie, durch verändern der Länge des Textes, die Breite der legend oder Polsterung. Nur ein Erster Blick erraten
  • Was ist das css kommt für Ihre Legende? Ich habe gerade einen bekommen einen border-bottom:1px mir?
  • Ich sehe, dass die Bootstrap-fügt unter anderem eine width: 100% und ein border-bottom: 1px solid Eigenschaft, welche Ursachen dieses Verhalten. Die erste Eigenschaft lässt sich das original-line auf der rechten Seite verschwinden, während die zweite die Zeile unterhalb der Legende angezeigt. Nicht sicher, was Bootstrap ist hier zu tun versuchen.
InformationsquelleAutor aknuds1 | 2012-07-13
  1. 8

    Wenn Sie schalten Sie Ihr stylesheet-Deklarationen, so dass die bootstrap-ist es zuletzt sollte das Problem beheben, sprich:

    <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" />

    Bootstrap-styles

    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;
}

    Standard-MVC-Stil.css-Stile 

    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;
}

    Ergebnis sollte so Aussehen:

    Twitter Bootstrap änderungen rendering der fieldset-Legende, warum?

    vs anders herum (MVC Standard-styles deklariert Letzte)

    Twitter Bootstrap änderungen rendering der fieldset-Legende, warum?

    Alternativ, loszuwerden, die MVC-stylesheet insgesamt und die Verwendung von bootstrap zusammen mit dem, was benutzerdefinierten Formatvorlagen, die Sie benötigen.

    InformationsquelleAutor MikeM
Schreibe einen Kommentar