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インライン要素にする必要があります。したがって、それに応じてブートストラップCSSをオーバーライドする必要があります。おそらく、これをテーブルセルのラベルにのみ適用したいと思うでしょう。例えば

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