1つの行にブートストラップ制御を強制する

Question

右に3つのコントロールをグループ化すると、A）は右に引っ張られ、Bはインラインで隣り合わせに配置され、左のコントロールのように。

ここで右コントロールの親要素です：

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

は、テキストの権利を追加または：

<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>タグがあります：

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

ここ<user-search>タグですプル右は何もしない、あるいは私の実験からは反生産的です。

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/