html - 无法使用 bootstrap CSS 显示内联表单

Question

我刚开始在我设计的设置表单中使用 bootstrap CSS。

表单有 3 个顶级设置，radio1(y 或 n)，TopSettings(有 3 个子设置:启用， textbox1、textbox2) 和 mediaDir(文本框)。我试图在左侧对齐这 3 个顶级标签，并在右侧对齐 TopSettings 的 3 个子设置。

在启动之前，我能够使用硬编码的 html 表来实现这些。

(在图片中:顶部 - 我想要的外观，并通过 html 中的硬编码表格实现。底部 - 使用 Bootstrap 的外观)

<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 个子设置的 inline 属性丢失了。我确实添加了带有 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。 (我也试过chrome，它是inline显示的，但是没有对齐。)有谁知道如何实现如上图的显示？

编辑:我的 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;
}

Answer 1

这是一个working version of your code on fiddle .

导致问题的原因:

在使用 Bootstrap 水平表单时，请始终记住结构应如下所示:

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
             <input type="text" id="inputEmail" placeholder="Email">
        </div>
    </div>
</form>

因此，在您的情况下，您应该将“子设置”嵌套在单个 div class="controls" 中: "TopSettings=" 之后的那个标签 block 。这是合乎逻辑的，因为所有“子设置”都形成一个嵌套 block ，即与标签 "TopSettings=" 对应的控件。 .

那么就不用form-inline了:请注意，嵌套 block (“子设置”组)只不过是 form-horizontal 的另一个嵌套实例。 .自 form-horizontal 的属性已经从父窗体继承了，就不用再赘述了。相反，您应该将三个“子设置”包装在control-group 中。 div，它又将包含标签和控件。

修改后的代码:

<div class="control-group code">
    <label class="control-label code">TopSettings=</label>

    <div class="controls">
        <div class="control-group code">
            <label class="control-label">Enabled= </label>
            <div class="controls">
                <input class="code" type="radio" name="Enabled" value="Y"/>y
                <input class="code" type="radio" name="Enabled" value="N"/>n
            </div>
        </div>

        <div class="control-group code">
            <label class="control-label">textbox1=</label>
            <div class="controls">
                <input type="number" name="textbox1e" onblur="if(this.value=='') this.value = 40" placeholder=40 />
            </div>
        </div>

        <div class="control-group code">
            <label class="control-label">textbox2=</label>
            <div class="controls">
                <input type="number" name="textbox2" placeholder=640 />
            </div>
        </div>
    </div>
</div>

编辑

要对齐子控件，您可以将以下自定义的两个类添加到您的 css:

.form-horizontal .control-label.subcontrol-label{
    width: auto;
}

.form-horizontal .controls.subcontrols{
    margin-left: 80px;   
}

并将它们与子设置标签相应地使用，例如

<label class="control-label subcontrol-label">

和控制 div 例如

<div class="controls subcontrols"> .

您可以找到演示的更新版本 here .