自舉輸入組和按鈕對齊

我希望輸入組左對齊，因爲它和「添加新」按鈕對齊到行的右側。自舉輸入組和按鈕對齊

<div class="row"> 
    <div class="input-group col-sm-6">   
    <input type="text" class="form-control" placeholder="Search by a substring in good's name.."></input> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button" onclick="filter()">Search</button> 
    </span> 
    </div> 

    <div class="col-sm-6">   
    <button class="btn btn-default text-right" type="button" onclick="addNew()">Add new</button> 
    </div> 
</div>

在行動：Bootply

正如你看到的，輸入組和「新添加」按鈕垂直堆疊，雖然他們是在一個單行。

來源

2016-02-05 Andrew Vershinin

<div class="row"> 
    <div class="col-lg-6"> 
     <div class="input-group">   
      <input type="text" class="form-control" placeholder="Search by a substring in good's name.."> 
      <span class="input-group-btn"> 
      <button class="btn btn-default" type="button" onclick="filter()">Search</button> 
      </span> 
     </div> 
    </div> 

     <div class="col-lg-6">   
      <button class="btn btn-default" type="button" onclick="addNew()">Add new</button> 
     </div> 
     </div>

Separete從DIV

Bootply的col-lg-6和input-group：http://www.bootply.com/W8ao9A0a4r

來源

2016-02-06 04:53:12

見下文。我將添加新的按鈕代碼移到搜索按鈕旁邊。輸入位於左側，添加新按鈕位於右側。如果你想添加新按鈕來擁抱瀏覽器的右側，請告訴我。

<div class="actions row"> 
     <div class="input-group col-sm-6">   
      <input type="text" class="form-control" placeholder="Search by a substring in good's name.."> 
      <span class="input-group-btn"> 
      <button class="btn btn-default" type="button" onclick="filter()">Search</button> 

      </span> 
     </div> 

     <div class="col-sm-6">   
      <button class="btn btn-default text-right" type="button" style="float:right; margin-right:-15px;" onclick="addNew()">Add new</button> 
     </div> 
     </div>

來源

2016-02-05 22:24:58 ketchupisred

不，我不想要的「新添加」按鈕，將輸入的羣中，我想它與團隊保持一致。 –

好吧，你最初並沒有這麼說。等一下。 – ketchupisred

好的。該按鈕位於單獨的行中，一直到右側。它漂浮在右邊，如果輸入被移動，添加新按鈕也是如此。 – ketchupisred

自舉輸入組和按鈕對齊

回答

相關問題