Question

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

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

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

-> Please see image here <-

（在图像中：顶部 - 我想要的外观，并通过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的“inline”类，并且启用无线电以内联方式显示，但 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;
}

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="标签块之后的那个。这是合乎逻辑的，因为所有“子设置”形成一个嵌套块，它是对应于标签"TopSettings="的控件。

然后，不需要使用form-inline：注意嵌套块（“子设置”组）只不过是form-horizontal的另一个嵌套实例。由于form-horizontal的属性已经从父表单继承，因此无需重复自己。相反，你应该在control-group div中包含三个“子设置”中的每一个，而这些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的更新版本。

无法使用引导程序CSS显示内联表单

1 个答案:

导致问题的原因是：

修改