1

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

该表单有 3 个顶级设置，radio1（y 或 n）、TopSettings（有 3 个子设置：Enable、textbox1、textbox2）和mediaDir（文本框）。我试图在左侧对齐这 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。（我也尝试过chrome，它显示为内联但未对齐。）有谁知道如何实现如上图的显示？

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

1 回答 1

1

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

然后，没有必要使用form-inline: 注意嵌套块（“子设置”组）只不过是form-horizontal. 由于 的属性form-horizontal已经继承自父窗体，因此无需重复。相反，您应该将三个“子设置”中的每一个都包装在一个control-groupdiv 中，该 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">.

您可以在此处找到演示的更新版本。

于 2013-08-07T22:59:53.837 回答