强制自举控制到一行

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/