Twitter Bootstrap zmienia rendering legendy zestawu pól, dlaczego?

W tym projekcie ASP.NET MVC 3, właśnie zacząłem eksperymentować z Bootstrap na Twitterze, ale zauważyłem, że to messes z renderowaniem legend <fieldset>. Co dzieje się z opisywaną tu legendą i jak mogę przywrócić ją do normalności? Oznacza to, że chcę, aby prawy wiersz był ponownie wyrównany w pionie z lewą linią.Twitter Bootstrap zmienia rendering legendy zestawu pól, dlaczego?

Standardowa renderowania legenda, wstępnie Bootstrap, na lewo, Bootstrap dotkniętych renderowania w prawo:

Normal legend Twitter Bootstrap legend

Aktualizacja: Znalazłem się, co jest przyczyną złamaną rendering przynajmniej: Bootstrap zmienia właściwość width legendy na 100%, a właściwość border-bottom na "1px solid". Powoduje to wymazanie oryginalnej ramki po prawej stronie legendy i wyświetlenie zamiast niej ramki poniżej. Pytanie brzmi, jak to ma działać. Może CSS MVC (Site.css) zakłóca działanie Bootstrapa?

Źródło

2012-07-13 aknuds1

może to być problem z szerokością. Spróbuj zmienić długość tekstu, szerokość "legendy" lub dopełnienie. Tylko pierwszy domysł z odgadnięcia – Eonasdan

Co wyskakuje css dla twojej legendy? Po prostu dostaję granicę: 1px na moim? – Jeemusu

Widzę, że Bootstrap dodaje między innymi właściwość 'width: 100%' i 'border-bottom: 1px solid', która powoduje to zachowanie. Pierwsza właściwość powoduje, że pierwotna linia po prawej stronie znika, podczas gdy druga powoduje pojawienie się linii poniżej legendy. Nie jestem pewien, co Bootstrap próbuje tutaj zrobić. – aknuds1

Jeśli zmienisz swoje deklaracje arkusz stylów tak, że bootstrap jest ostatnia powinna rozwiązać ten problem, a mianowicie:

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

style Bootstrap

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

domyślne MVC style.css style

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

końcowy wynik powinien wyglądać następująco:

enter image description here

vs na odwrót (MVC domyślne style deklarowanych ostatni)

enter image description here

Alternatywnie, pozbyć arkusza stylów MVC całkowicie i użyć bootstrap wraz z dowolnymi niestandardowymi stylami, których potrzebujesz.

Źródło

2012-07-13 18:54:17 MikeM

Twitter Bootstrap zmienia rendering legendy zestawu pól, dlaczego?

Odpowiedz

Powiązane problemy