Question

必须有一种方法可以在Bootstrap中将一个表单旁边显示，而无需手动将CSS设置为display:inline-block。

I've created a fiddle here.

我已经使用了form-inline课程，但这似乎没什么区别。我错过了什么吗？

Answer 1

这是解决方案：

使用form-inline添加一个“pull-left”类。

希望这会有所帮助。

Answer 2

您可以使用网格系统并排放置两个表单。例如：

<div class="container">
 <div class="col-xs-6">
  <form class='form-inline'>
    <div class="input-group">
      <input type="date"class="form-control">
      <span class="input-group-btn">
        <button type='submit' class="btn btn-secondary" type="button">View</button>
      </span>
    </div>
  </form>
</div>
<div class="col-xs-6">
  <form class='form-inline'>
    <div class="input-group">
      <input type="date"class="form-control">
      <span class="input-group-btn">
        <button type='submit' class="btn btn-secondary" type="button">View</button>
      </span>
    </div>
  </form>
</div>

请参阅JS Fiddle

上的工作示例

Answer 3

通过在表单中应用col类，您将获得正确的结果。

    <div class='container'>
    <div class='row m-b-20 title'>
        <div class='col-sm-6'>
            <h1>Test page</h1>
        </div>
        <div class='col-sm-6 text-right'>
            <form action='/error-logs' method='POST' class='input-group pull-left'>
                <button type='' name='' class='btn btn-default' alt='' title=''><span class='fa fa-floppy-o'></span>Button 1</button>
            </form>
            <form action='/error-logs' method='POST' class='input-group pull-right'>
                <div class="input-group">
                    <input type="date" name='fromdate' class="form-control">
                    <span class="input-group-btn">
                        <button type='submit' class="btn btn-secondary" type="button">View</button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>

Answer 4

您应该使用输入组类，如下所示：innput-group

Answer 5

我偶然发现了类似问题的答案我已经通过这样做解决了

<form action="cosprocess.php" method="post" style="float: left; padding: 1px;">

Answer 6

让父div成为一行，所有大众都有12个col长度。在输入字段后使用按钮，并将所有这些按钮放在一个带有内联类的单个表单中。 fiddle

`

            <div class="input-group">
                <input type="date" name='fromdate' class="form-control">
                <span class="input-group-btn">
                    <button type='submit' class="btn btn-secondary" type="button">View</button>
        <button type='' name='' class='btn btn-default' alt='' title=''><span class='fa fa-floppy-o'></span>Button 1</button>
                </span>
            </div>
        </form>`

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

6 个答案: