在Bootstrap 4中输入标签旁边的输入

Question

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

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

Answer 1

您可以为每个表单组

使用 form-inline

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

Answer 2

查看此演示：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>

Answer 3

试试这个老兄。尝试在整页中运行代码段。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;