html - 使用 Bootstrap 在一行中输入框和标签

Question

我是孙悟空我正在使用 Modal。因为我想在模态中创建一个表单。在那种形式下，我希望标签和输入框在一行中。我的代码是:

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

这是我的模式。我的标签“公司名称”和输入框在一行中。与“职务”相同

Answer 1

假设您想知道如何在 bootstrap 中布局表单，请看这里:

代码:

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

WORKING DEMO HERE