0

私はモーダルを使用しているソナルです。モーダルでフォームを作成したいということです。そしてそのフォームでは、ラベルとinputBoxを1行にまとめたいと思っています。私のコードは次のとおりです。

 <a data-toggle="modal" href="#work" style="float:right;font-size:60%;">
        <small> Edit&nbsp;
        </small>
          </a>
          <div class="modal fade " id="work">
        <div class="modal-dialog ">
          <div class="modal-content light">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
              </button>
              <h4 class="modal-title">work
              </h4>
            </div>
          <div class="modal-body">
            <form>
              <fieldset>
                    <label  for="Company">Company Name:
            </label>
                <input type="text" name="Company" id="inputbox" 
                   class="form-control" />
<br>
            <label  for="Job">Job Title:
            </label>
                <input type="text" name="Job" id="inputbox" 
               class="form-control" />
<br>
        </fieldset>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close
          </button>
          <button type="button" class="btn btn-primary">Save changes
          </button>
        </div>
      </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

これは私のモーダルです。私のラベル「会社名」と入力ボックスを一行で。「役職」と同じ

4

1 に答える 1

0

ブートストラップでフォームをレイアウトする方法を知りたいと仮定すると、次のようになります。

コード :

  <form class="form-horizontal" role="form">
  <div class="form-group">
    <table>
      <tr>
        <td>
    <label for="inputEmail1" class="col-lg-2 control-label">Company Name:</label>
        </td>
        <td>
    <div class="col-lg-10">
      <input type="email" class="form-control" id="inputEmail1" placeholder="Company Name">
    </div>
        </td>
      </tr>
    </table>
  </div>
  <div class="form-group">
    <table>
      <tr>
        <td>
    <label for="inputPassword1" class="col-lg-2 control-label">Job Title:</label>
          </td>
        <td>
          <div class="col-lg-10" style='padding-left:62px;'>
      <input type="password" class="form-control" id="inputPassword1" placeholder="Job Title">
    </div>
          </td>
      </tr>
    </table>
  </div>

  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <button type="submit" class="btn btn-default">Search</button>
    </div>
  </div>
</form>

ワーキングデモはこちら

于 2013-09-16T10:41:47.737 に答える