Dlaczego wyświetlanie etykiet i danych nie jest wyrównane za pomocą twitter bootstrap 2, jeśli zawartość elementu <dd> jest pusta?

Pojawia się nieoczekiwane zachowanie z tagiem opisu <dl>.Dlaczego wyświetlanie etykiet i danych nie jest wyrównane za pomocą twitter bootstrap 2, jeśli zawartość elementu <dd> jest pusta?

Używam twitter bootstrap 2 i z tego kodu Przykład:

<!DOCTYPE html> 
<dl class="dl-horizontal"> 
    <dt>Item1</strong></dt><dd>This is a description of Item1</dd> 
    <dt>Item2</strong></dt><dd>This is a description of Item2</dd> 
    <dt>Item3</strong></dt><dd>This is a description of Item3</dd> 
    <dt>Item4</strong></dt><dd>This is a description of Item4</dd> 
    <dt>Item5</strong></dt><dd>This is a description of Item5</dd> 
</dl>

... wszystko działa zgodnie z oczekiwaniami i widzę to:

Item1 This is a description of Item1 
Item2 This is a description of Item2 
Item3 This is a description of Item3 
Item4 This is a description of Item4 
Item5 This is a description of Item5

z tym kodem choć:

<!DOCTYPE html> 
<dl class="dl-horizontal"> 
    <dt>Item1</strong></dt><dd>This is a description of Item1</dd> 
    <dt>Item2</strong></dt><dd></dd> 
    <dt>Item3</strong></dt><dd>This is a description of Item3</dd> 
    <dt>Item4</strong></dt><dd>This is a description of Item4</dd> 
    <dt>Item5</strong></dt><dd>This is a description of Item5</dd> 
</dl>

Widzę problematyczny wyświetlacz:

Item1 This is a description of Item1 
Item2 This is a description of Item3 
Item3 This is a description of Item4 
Item4 This is a description of Item5 
Item5

A <dt> i <dd> znaczniki nie zgadzają się zgodnie z oczekiwaniami.

Czytając projekt pracy w3.org tutaj http://www.w3.org/TR/html-markup/dl.html#dl

... to nie jest dla mnie jasne, czy przeglądarka lub programista jest odpowiedzialny za dopasowanie się <dt> i <dd> elementy gdy zawartość dla <dd> jest pusty.

Przetestowałem powyższy kod w FireFox i Safari i widziałem to samo wyjście.

Czy to jest kwestia opinii, błąd na twitterze bootstrap 2, czy też nie rozumiem korzystania z listy opisów HTML5? Takie wykorzystanie <dl> pojawia się w kodzie show.html.erb automatycznie generowane przez

rake g bootstrap:themed model

Jeśli element danych jest puste, wyświetlana wyjściowa nie pasuje do etykiety. To niefortunne, ponieważ opcja tematyczna jest całkiem przydatna.

mogę częściowo „rozwiązać problem” poprzez modyfikację wyjście tematycznych wyglądać następująco:

<dt><strong><%= model_class.human_attribute_name(:name) %>:</strong></dt> 
<dd><%= @server.name %> <%= "-blank-" if @server.name.blank? %> </dd>

... ale ja zostaję widząc „-blank-”, aby wyświetlić puste elementy. Jeśli użyję czegoś takiego jak ciąg znaków zawierający spację, np. "", Nadal widzę problem z niewspółosiowością opisu etykiety.

Spróbuj skoncentrować się na odpowiedzi na temat tego, która encja, znacznik HTML5 <dl>, bootstrap lub moje zrozumienie, jest tutaj niedostępna i dlaczego.

Dziękuję bardzo!

-EDIT- Dla osób pracujących z bootstrap za pomocą css jak to działa prawidłowo:

dt, dd { 
    line-height: 20px; 
    /* Keep this the same as line-height */ 
    min-height: 20px; 
}

Źródło

2012-10-14 Perry Horwich

Domyślnie <dt> i <dd> są elementy blokowe, nie ma potrzeby „align” ich w jakikolwiek sposób , naturalnie wyświetlały się jeden po drugim.

Bootstrap to .dl-horizontal, jednak wyrównuje te elementy obok siebie.A gdy jeden z <dd> nie ma treści, jest zwinięty, a inne przesunięte w górę. (Co oczywiście to, czego nie chcesz.) To zachowanie może być „stałe” tak:

dd { 
    /* should be the same as line-height */ 
    min-height: 20px; 
}

Ale nie odwołuje tego jako błędu w startowej. Dlaczego chcesz mieć definicję bez definicji? Nie wyświetlanie tego terminu w ogóle ma dla mnie większy sens.

Źródło

2012-10-14 15:55:16 Pavlo

Dzięki Pavlo. Spróbuję naprawić css. Zgadzam się, że po prostu ma sens, że definicja definicji powinna mieć definicję. Problem wydaje się pojawiać, gdy

jest używany do wyświetlania elementów rekordów i ich wartości w środowisku opartym na bazie danych. Przydatne może być sprawdzenie, czy niektóre elementy rekordu pozostały puste. Być może "niezdefiniowana" definicja rodzajów? –

Tak. Poprawka css działa. Doskonały. –

Innym rozwiązaniem może być taka:

.dl-horizontal > dd:after { 
    display: table; 
    content: ""; 
    clear: both; 
}

Źródło

2013-05-31 08:59:10 Pigueiras

Zastępowanie szerokości i ustawić min wysokości dt dd rozwiązuje ten problem przez pusty lub dłuższy zawartości zarówno dla dt dd.

.dl-horizontal > dt { 
    width: 51% !important; 
} 

.dl-horizontal > dd { 
    width: 49% !important; 
} 

dt, dd { 
    line-height: 20px; 
    min-height: 20px; /* must be line-height, to allocate height for empty elements */ 
}

Źródło

2015-07-09 08:43:47 TheSchecke

Dlaczego wyświetlanie etykiet i danych nie jest wyrównane za pomocą twitter bootstrap 2, jeśli zawartość elementu <dd> jest pusta?

Odpowiedz

Powiązane problemy