在 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

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

<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

试试这个，伙计。尝试在整页中运行片段。

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

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

Make Label Beside Input in Bootstrap 4

css

twitter-bootstrap

twitter-bootstrap-form

bootstrap-4

HTML