使用 Twitter Bootstrap 的表单中的水平字段答案

【问题标题】：Horizontal fields in Form using Twitter Bootstrap使用 Twitter Bootstrap 的表单中的水平字段
【发布时间】：2013-04-22 11:48:59
【问题描述】：

我正在使用 Twitter 引导程序来创建我的表单。我的目标是在表单中创建两行（实际上更多，但我正在简化它以使问题变得简单）。第一行包含三个标签。第二行将包含三个输入框，用于获取文本作为输入。

我已经编写了以下代码来实现这一点：

<div class="span6" id="create_trips" >
                    <form class="form-horizontal" method='post' action=''>
                        <fieldset>

                            <legend>
                                Test
                            </legend>
                            <div class="control-group">
                                <label class="control-label">test1</label>
                                <label class="control-label">test2</label>
                                <label class="control-label">test3</label>
                            </div>

                            <div class="control-group">
                                <div class="controls">
                                    <input type="text" class="input-mini">
                                </div>
                                <div class="controls">
                                    <input type="text" class="input-mini">
                                </div>
                                <div class="controls">
                                    <input type="text" class="input-mini">
                                </div>
                            </div>                              
                        </fieldset>
                    </form>
                </div>

但问题是第二行完全不对齐。而我的第一行是正确的。我在此处附上了上述代码产生的当前输出：

【问题讨论】：

你试过在 DIV 控件上拉左键吗？
Format fields in twitter bootstrap to show like a table 的可能重复项
@Pleun 是的，我刚刚尝试过，但它对实现我的目标没有帮助。
@Blowsie 另一个问题不用form class="form-horizontal"

标签： html forms twitter-bootstrap

【解决方案1】：

您在引导程序中有 12 个列...所以按行创建 3 个列，如下所示：

<!-- The row -->
<div class="row-fluid">
  <!-- One col -->
  <div class="span4">
    <div class="control-group">
      <label class="control-label">test1</label>
      <div class="controls">
        <input type="text" ... />
      </div>                    
    </div>
  </div>

  <!-- Another col -->
  <div class="span4">
    <div class="control-group">
      <label class="control-label">test1</label>
      <div class="controls">
        <input type="text" ... />
      </div>                    
    </div>
  </div>

  <!-- The last col -->
  <div class="span4">
    <div class="control-group">
      <label class="control-label">test1</label>
      <div class="controls">
        <input type="text" ... />
      </div>                    
    </div>
  </div>
</div>

<!-- Another row -->
<div class="row-fluid">
  <!-- One col -->
  <div class="span4">
    <div class="control-group">
      <label class="control-label">test1</label>
      <div class="controls">
        <input type="text" ... />
      </div>                    
    </div>
  </div>

  <!-- Another col -->
  <div class="span4">
    <div class="control-group">
      <label class="control-label">test1</label>
      <div class="controls">
        <input type="text" ... />
      </div>                    
    </div>
  </div>

  <!-- The last col -->
  <div class="span4">
    <div class="control-group">
      <label class="control-label">test1</label>
      <div class="controls">
        <input type="text" ... />
      </div>                    
    </div>
  </div>
</div>

【讨论】：

我知道它有 12 列，但其余的被分配用于不同的目的。无论如何，我可以使用span2 尝试您的方法。
是的，您当然可以根据您的需要调整代码；）告诉我它是否对您有帮助，或者您是否需要更准确的解决方案

【解决方案2】：

最后我使用一些自定义 CSS 并更改 HTML 代码中的类名解决了这个问题。这是 HTML 代码：

<form class="form-horizontal" method='post' action=''>
<fieldset>
    <legend>Test</legend>
    <div class="control-group">
        <label class="control-trip" style="text-align: center">test1</label>
        <label class="control-trip" style="text-align: center">test2</label>
        <label class="control-trip" style="text-align: center">test3</label>
    </div>
    <div class="control-group">
        <div class="control-trip">
            <input type="text" class="input-mini">
        </div>
        <div class="control-trip">
            <input type="text" class="input-mini">
        </div>
        <div class="control-trip">
            <input type="text" class="input-mini">
        </div>
    </div>
</fieldset>

这里是对应的CSS：

   .form-horizontal .control-trip
{
    text-align: center;
    float: left;
    width: 140px;
    padding-top: 5px;
}

解决方案在这里jsfiddle.

【讨论】：