設計中の設定フォームでブートストラップ CSS を使い始めたところです。
フォームには、 radio1 (y または n)、TopSettings (3 つのサブ設定: Enable、textbox1、textbox2 )、およびmediaDir (テキストボックス)の 3 つのトップレベル設定があります。これらの 3 つのトップ レベル ラベルを左側に配置し、 TopSettingsの 3 つのサブ設定を右側に配置しようとしています。
ブートストラップの前は、ハードコーディングされた html テーブルを使用してこれらを実現できました。
(画像: 上 - 私が望んでいた外観で、html にハードコードされたテーブルで実現されています。下 - ブートストラップでどのように見えるか)
<form name="serverSetting">
<fieldset> <legend> <b>Settings</b> </legend>
<div>
<table class="code">
<tr>
<td class="padded"> radio1= </td>
<td class="padded"> <input type="radio" name="radio1" value="Y">y
<input type="radio" name="radio1" value="N">n </td>
</tr>
<tr>
<td class="padded"> TopSettings=</td>
<td class="padded">
<table class="code" cellspacing = "0" cellpadding = "0">
<tr>
<td>Enabled= </td>
<td> <input type="radio" name="Enabled" value="Y">y
<input type="radio" name="Enabled" value="N">n ; </td>
</tr>
<tr>
<td>texbox1=</td>
<td><input type="number" name="textbox1" value=40>;</td>
</tr>
<tr><td>textbox2=</td>
<td><input type="number" name="textbox2" value=640>;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="padded">mediaDir= </td>
<td class="padded"><input type="text" name="mediaDir" value="/data/media">;</td>
</tr>
</table>
</div>
</fieldset>
</form>
しかし、Bootstrap に切り替えると、3 つのサブ設定のインライン プロパティが失われました。div を使用して「インライン」クラスを追加し、ラジオを有効にするとインラインで表示されますが、textbox1とtextbox2は表示されません。
<form class="form-horizontal" name="serverSetting">
<fieldset> <legend> <b>Settings</b> </legend>
<div class="control-group code">
<label class="control-label code" for="xcode">radio1=</label>
<div class="controls">
<input type="radio" name="radio1" value="Y">y
<input type="radio" name="radio1" value="N">n
</div>
</div>
<div class="control-group code">
<label class="control-label code" for="TopSettings">TopSettings=</label>
<div class="controls form-inline">
<label class="inline" for="TopSettings">Enabled= </label>
<input class="code" type="radio" name="Enabled" value="Y">y
<input class="code" type="radio" name="Enabled" value="N">n
</div>
<div class="controls form-inline">
<label>textbox1e=</label>
<input type="number" name="textbox1e" onblur="if(this.value=='') this.value = 40" placeholder=40>
</div>
<div class="controls form-inline">
<label for="textbox2">textbox2=</label>
<input type="number" name="textbox2" placeholder=640>
</div>
</div>
<div class="control-group code">
<label class="control-label code" for="mediaDir">mediaDir=</label>
<div class="controls">
<input type="number" name="mediaDir" placeholder="/data/meida/">
</div>
</div>
</fieldset>
</form>
Firefoxでhtmlを開いていました。（私もクロムを試みましたが、インラインで表示されましたが、整列しませんでした。）上の写真のように表示する方法を知っている人はいますか？
編集:私のcssファイル:
div{
max-width:550px;
}
.code {
font-family: "Courier New", Courier, monospace;
}
input{
}
.code {
font-family: "Courier New", Courier, monospace;
}
label.code {
font-family: "Courier New", Courier, monospace;
}