9

テーブルにフォームがあり、すべてのフィールド サイズがうまく収まっています。しかし、.input-group-addon を持つ日付フィールドが 1 つあります。これにより、サイズ コントロールがうまく機能しなくなります。それを修正する方法はありますか？

入力を小さくする方法をいくつか試しましたが、アドオンが添付されなくなりました: http://jsfiddle.net/93MpC/1/

フィドルからのコード:

<div class="table-responsive">
<table class="table table-bordered">
    <tr class="form-group">
    <td><label class="field-label required-field">Name:</label></td>
    <td><div class="input-group">
        <input type="text" name="name" required id="id_name" class="form-control">
    </div></td>
    </tr>
    <tr class="form-group">
    <td><label class="field-label">Birthdate:</label></td>
    <td><div class="input-group">
        <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
    </div></td>
    </tr>
    <tr class="form-group">
    <td><label class="field-label">Birthdate:</label></td>
    <td><div class="input-group"><div class="row">
        <div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div>
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>
    </div></td>
    </tr>
    <tr class="form-group">
        <td><label class="field-label">Birthdate:</label></td>
        <td><div class="input-group">
        <div class="row">
          <div class="col-lg-3">
            <div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div>
            <div class="col-lg-1"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>
            </div>
          </div>
        </div></td>
    </tr>
</table>
</div>

前もって感謝します！

4

2 に答える 2

13

これに適した HTML には、別のレベルのネストが必要です。詳細については、入力グループのドキュメントを参照してください。

サイズの入力とアドオンを使用<td>すると、次のようになります。

<td class="row">
    <div class="col-md-6">
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</td>

クラスは.col-*左右にパディングを追加するので、それが問題になる場合は、少しの CSS でパディングを削除できます。

于 2013-09-01T12:50:36.840 に答える
4

あなたのコードから、クラスの半分を親 div に追加しました。CSSは次のとおりです。

.half {
  width: 50%;
}

そしてHTML（ほぼ同じ）：

<div class="input-group half"><!-- here is .half -->
  <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/>
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

編集または col を使用する場合は、別のオプションがあります。

<div class="row">
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-3">Birthdate:</div>
      <div class="col-md-9">
        <div class="input-group">
          <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/>
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

例

于 2013-09-01T12:38:15.423 に答える