Question

有没有办法在Bootstrap 4中轻松地将一个表单旁边显示？以下代码不起作用： - /

    <div class="bd-example">
        <form id="validate-form" class="form-inline pull-right" method="post" role="form">
            <input type="hidden" name="get_final_form">
            <input class="btn btn-outline-primary btn-outline-success" name="btn" type="submit" value="Validate" />
        </form>     
        <form id="new-form" class="form-inline pull-right" method="post" action="index.php" role="form">
            <input class="btn btn-outline-primary btn btn-outline-primary" name="btn" type="submit" value="New" />
        </form>
    </div>

Answer 1

`<div class="container">
        <ul class="list-inline">
            <li class="list-inline-item">
                <form id="validate-form" class="form-inline pull-right" method="post" role="form">
                    <input type="hidden" name="get_final_form">
                    <input class="btn btn-outline-primary btn-outline-success" name="btn" type="submit" value="Validate" />
                </form>
            </li>
            <li class="list-inline-item">
                <form id="new-form" class="form-inline pull-right" method="post" action="index.php" role="form">
                    <input class="btn btn-outline-primary btn btn-outline-primary" name="btn" type="submit" value="New" />
                </form>
            </li>
        </ul>
    </div>`

Answer 2

您没有以正确的方式使用bootstrap列。

这样做：

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Answer 3

将您的空间分成两列并将相应的表单放入其中

<div class="row">
  <div class="col-md-6">
     <form id="form1"></form>
  </div>

  <div class="col-md-6">
      <form id="form2"></form>
  </div>
</div>

Bootstrap 4以内联方式显示多个表单

3 个答案: