0

フォームの作成に Twitter ブートストラップを使用しています。私の目的は、フォームに 2 つの行を作成することです (実際にはそれ以上ですが、質問を簡単にするために単純化しています)。最初の行には 3 つのラベルが含まれています。2 行目には、入力としてテキストを取得するための 3 つの入力ボックスが含まれます。

それを達成するために、次のコードを作成しました。

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

しかし問題は、2 行目が完全に整列していないことです。私の最初の行は適切ですが。上記のコードによって生成された現在の出力をここに添付しました。出力

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 に答える