0

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

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

4

2 回答 2

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>
于 2013-04-22T11:58:08.827 回答
0

最后，我使用一些自定义 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 中。

于 2013-04-25T08:50:36.840 回答