1

JSF 中的selectOneRadio元素被转换为一个表格，其中单选按钮及其标签放在<td>一个表格中。

<!-- JSF Element -->
<h:selectOneRadio id="types" label="Type"
    value="#{bean.selectedType}"
    layout="pageDirection">
    <f:selectItems value="#{bean.types}"/>
</h:selectOneRadio>

<!-- Generated HTML -->
<table id="j_id_i:types">
    <tbody>
         <tr>
             <td>
                 <input id="j_id_i:types:0" type="radio" value="VALUE1"
                     name="j_id_i:types"/>
                 <label for="j_id_i:types:0"> Value #1</label>
             </td>
         </tr>
         <tr>...</tr>
         ...
    </tbody>
</table>

在我使用 Bootstrap 之前，其中的元素<td>会并排显示，但现在会在彼此下方查看。

元素在彼此之下

元素的处理 CSS 如下，由 Firebug 给出。

table {
    border-collapse: collapse;
    border-spacing: 0;
}
body {
    color: #333333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
}
html {
    font-size: 100%;
}

我不知道是什么导致了这种行为。这不是宽度的问题，因为这是 中的单个元素<div>，并且没有引导它是并排渲染的。

4

1 回答 1

1

那是因为<label>Bootstrap CSS 已经成为一个HTML 块元素，它自然地从一个新行开始。

您需要再次使其成为HTML 内联元素。因此，您需要相应地覆盖 Bootstrap CSS。也许您只想将此应用于表格单元格中的标签。例如

td label {
    display: inline;
}
于 2012-11-29T13:15:47.563 回答