Bootstrap行內形式（輸入+按鈕）斷行

Question

我一直在使用Bootstrap。我不會說我是專家但我很精通。然而，這種形式的內聯的問題讓我神魂顛倒：

這就是我想要一個很簡單的事情，但我在這裏，無法將兩個元素行：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
<div class="row"> 
 
<div class="col-xs-6"> 
 
    <form class="form-inline"> 
 
    <div class="form-group"> 
 
     <label for="modal_add_group_input"></label> 
 
     <input class="form-control" id="modal_add_group_input" placeholder="Nombre de grupo" type="text"> 
 
    </div> 
 
    <button type="submit" class="btn btn-success"> 
 
     <span style="color: white;" class="glyphicon glyphicon-plus-sign">  
 
     </span> Crear Grupo</button> 
 
    </form> 
 
</div> 
 
</div> 
 
</div>

這裏沒有嘗試任何東西。我又回到基本，甚至提供的示例不工作：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form class="form-inline"> 
 
    <div class="form-group"> 
 
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> 
 
    <div class="input-group"> 
 
     <div class="input-group-addon">$</div> 
 
     <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> 
 
     <div class="input-group-addon">.00</div> 
 
    </div> 
 
    </div> 
 
    <button type="submit" class="btn btn-primary">Transfer cash</button> 
 
</form>

...有什麼建議？我究竟做錯了什麼？ Ç_Ç

PS：不是Bootstrap inline form's submit button not in the same line的副本。試過了。沒有工作。

Answer 1

您在代碼片段中看到的問題是由於斷點（窗體組組件寬度爲100％）。你需要它在移動設備的同一行嗎？

好，在這裏你有3個解決方案

1. 內嵌了大屏幕
2. 內聯所有的屏幕尺寸
3. 內聯的所有屏幕尺寸的無網格（更新答案）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> **Inline for big screens devices** 
 
<form class="form-inline"> 
 
    <div class="form-group"> 
 
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> 
 
    <div class="input-group"> 
 
     <div class="input-group-addon">$</div> 
 
     <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> 
 
     <div class="input-group-addon">.00</div> 
 
    </div> 
 
    </div> 
 
    <button type="submit" class="btn btn-primary">Transfer cash</button> 
 
</form> 
 
<hr> **Inline for all screen sizes** 
 
<form class="form-horizontal"> 
 
    <div class="form-group"> 
 
    <div class="col-xs-6"> 
 
     <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> 
 
     <div class="input-group"> 
 
     <div class="input-group-addon">$</div> 
 
     <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> 
 
     <div class="input-group-addon">.00</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <button type="submit" class="btn btn-primary">Transfer cash</button> 
 
    </div> 
 
    </div> 
 
</form> 
 

 
<hr> 
 
<div class="container"> 
 
    **Inline for all screen sizes NO GRID** 
 
    <div class="row"> 
 

 
    <div class="col-xs-6"> 
 
     <form> 
 
     <div class="pull-right"> 
 
      <button type="submit" class="btn btn-primary">Transfer cash</button> 
 
     </div> 
 
     <div class=""> 
 
      <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> 
 
      <div class="input-group"> 
 
      <div class="input-group-addon">$</div> 
 
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> 
 
      <div class="input-group-addon">.00</div> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>