引導顯示多個表單內聯

Question

必須有一種方法可以在Bootstrap中顯示另一個表單旁邊的表單，而無需手動將CSS設置爲display:inline-block。

I've created a fiddle here.

我用form-inline類但似乎沒有太大的差別。我錯過了什麼嗎？

Answer 1

這裏是解決方案：

添加一類， 「拉左」 與形式的內聯。

希望這會有所幫助。

Answer 2

通過在窗體中應用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 3

您應該使用輸入組類，如下所示：innput-group

Answer 4

你可以使用網格系統把兩種形式並排。例如：

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

在這裏工作的例子讓父DIV來下一個行對所有大衆12關口長度。 在輸入字段後使用按鈕，並將它們全部放在一個單獨的窗體中。 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>`