簡單引導控件水平對齊

Question

我缺少一些引導程序。 我想要一個標籤/輸入/按鈕組合，向右推，全部在我的桌子上方一排。

它應保持相同的大小，水平堆疊在一排，直到它太小，以適應。

當我使用col - * - n時，輸入會填充div的全部寬度，導致元素（標籤和按鈕）包裹。

我在做什麼不是想做的就是把標籤，按鈕和輸入欄分別放在自己的列中，因爲那樣會造成醜陋的不均勻間隙。

我的意思是，它顯然足夠簡單，可以使用display：inline block。

我是否在文檔中缺少此樣式？

這裏是我的簡單普拉克： https://plnkr.co/edit/OOWp2wmxTbeGcZfrpqQp?p=preview

<form class="form-horizontal" role="form"> 
    <div class="row"> 
     <div class="col-sm-4 offset-sm-4"> 
      <div class="form-group pull-right"> 
       <label for="usr">Filter:</label> 
       <input type="text" class="form-control"> 
       <button type="button" class="btn btn-default" ng-click='clear()'>X</button> 
      </div> 
     </div> 
    </div> 
</form> 

Answer 1

我想你想使用form-inline而非form-horizontal

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<h4>Previous CODE:</h4> 
 

 
<form class="form-horizontal" role="form"> 
 
    <div class="row"> 
 
     <div class="col-sm-4 offset-sm-4"> 
 
      <div class="form-group pull-right"> 
 
       <label for="usr">Filter:</label> 
 
       <input type="text" class="form-control"> 
 
       <button type="button" class="btn btn-default" ng-click='clear()'>X</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</form> 
 

 
<h3>New Code</h3> 
 

 
<p>Note: According to Bootstrap, Controls only appear inline in viewports that are <strong>at least 576px wide</strong> to account for narrow viewports on mobile devices.</p> 
 
<form class="form-inline"> 
 
    <label for="inlineFormInput">Filter:</label> 
 
    <input type="text" class="form-control" id="inlineFormInput"> 
 
    <button type="button" class="btn btn-default" ng-click='clear()'>X</button> 
 
</form>

Answer 2

這裏是一個選擇：你可以使用input-groups爲你的形式，噸雌鴿漂浮在col-sm-12的右側（float-sm-right）。

body { 
 
    padding-top: 25px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="col-sm-12"> 
 
     <form class="float-sm-right"> 
 
     <div class="form-group"> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon bg-faded text-muted">Filter</span> 
 
      <input type="text" id="usr" class="form-control" name="usr"> 
 
      <span class="input-group-btn"> 
 
       <button type="button" class="btn btn-secondary" ng-click='clear()'>X</button> 
 
      </span> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 

 
    <div class="col-sm-12"> 
 
     <table class="table table-hover table-bordered table-striped"> 
 
     <thead> 
 
      <tr> 
 
      <th>#</th> 
 
      <th>First Name</th> 
 
      <th>Last Name</th> 
 
      <th>Username</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <th scope="row">1</th> 
 
      <td>Mark</td> 
 
      <td>Otto</td> 
 
      <td>@mdo</td> 
 
      </tr> 
 
      <tr> 
 
      <th scope="row">2</th> 
 
      <td>Jacob</td> 
 
      <td>Thornton</td> 
 
      <td>@fat</td> 
 
      </tr> 
 
      <tr> 
 
      <th scope="row">3</th> 
 
      <td colspan="2">Larry the Bird</td> 
 
      <td>@twitter</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 

 
    </div> 
 
</div>