強制引導控制到一條線上

Question

右邊的三個控件組，我無法弄清楚如何讓它們A）拉到右邊，並且B）內聯並且緊靠在一起，就像左邊的控件一樣。

下面是正確的控制父元素：

 <div class="col-md-4"> 
      <user-search></user-search> 
      <batch-button></batch-button> 
     </div> 

這裏的<user-search>標籤：

<div> 
    <transition name="fade"> 
     <button v-if="userSearch" @click="undoSearch()" class="btn btn-default"> 
      <span class="glyphicon glyphicon-remove-circle"></span> 
     </button> 
    </transition> 
    <input type="text" @keyup.enter="findUser()" v-model="searchText" class="form-control" placeholder="find user"/> 
</div> 

而這裏的<batch-button>標籤：

<button class="btn btn-default" @click="show()" type="button">Batch Operations 
    <span :class="{'glyphicon glyphicon-chevron-down': showForm, 'glyphicon glyphicon-chevron-up': !showForm}"></span> 
</button> 

添加文本的權利或從我的實驗中，拉向右無所作爲或者會產生反作用。

Answer 1

你缺少風格，缺少用戶的搜索代碼，但是這應該是足夠的起點：

<div class="btnbox"> 
    <user-search></user-search> 
    <button class="rbtn btn btn-default" @click="show()" type="button">Batch Operations <span :class="{'glyphicon glyphicon-chevron-down': showForm, 'glyphicon glyphicon-chevron-up': !showForm}"></span></button> 
    <button class="rbtn btn btn-default"> 
     <span class="glyphicon glyphicon-remove-circle"></span> 
    </button> 
</div> 

工作示例：http://jsfiddle.net/elance/52VtD/15650/