Question

我正在使用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>

但问题是第二行是完全未对齐的。而我的第一行是正确的。我在上面附加了上面代码生成的当前输出： Output

Answer 1

你在bootstrap中有12个cols ...所以按行创建3个cols，如下所示：

<!-- 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>

Answer 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.

中

使用Twitter Bootstrap在Form中的水平字段

2 个答案: