2

如何在输入表单旁边制作标签？我已经尝试了任何可能的方法，但它不起作用。请在下面检查我的代码。

  <div class="modal-body">
      <form class="form-horizontal">
        <div class="form-group">
          <label>Type</label>
          <input type="email" placeholder="Email Address" class="form-control">
        </div>
        <div class="form-group">       
          <label>First Name</label>
          <input type="password" placeholder="Password" class="form-control">
        </div>
      </form>
  </div>

css

div.form-group{
display: inline;}
4

3 回答 3

7

您可以为每个表单组使用表单内联

<div class="modal-body">
  <form class="form-horizontal">
    <div class="form-group form-inline">
      <label>Type</label>
      <input type="email" placeholder="Email Address" class="form-control">
    </div>
    <div class="form-group form-inline">       
      <label>First Name</label>
      <input type="password" placeholder="Password" class="form-control">
    </div>
  </form>

于 2017-09-21T03:35:16.657 回答
0

看看这个演示：https ://jsfiddle.net/DTcHh/37489/

Bootstrap 已经具有Horizontal form功能，请在此处查看https://getbootstrap.com/docs/3.3/css/#forms

HTML

<div class="container">
    <div class="modal-body">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
            </div>
        </form>
    </div>
</div>
于 2017-09-21T03:36:40.487 回答
0

试试这个哥们。尝试在整页中运行代码段。

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="container">
      <h4>Modal Example with inline form</h4>
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Open Modal</button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
        
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    
            </div>
            
                <div class="col-sm-10 col-sm-offset-2">&nbsp;</div>
                <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-success" data-dismiss="modal">Submit</button>
              </div>
            </div>
          </div>
          
        </div>
      </div>
      
    </div>

于 2017-09-21T03:54:34.893 回答