对齐行中的组件

Question

我有以下代码：

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="input-group">
                <input type="text" class="form-control input-sm" placeholder="Search Ticket" />
                <span class="input-group-btn">
                     <button class="btn btn-default btn-sm btn-default-gradient" type="button">
                         <i class="glyphicon glyphicon-search"></i>
                     </button>
                </span>
            </div>
            <button type="button" class="btn btn-default btn-sm btn-default-gradient">
                <span class="glyphicon glyphicon" aria-hidden="true"></span> Search Tools
            </button>
        </div>
        <div class="col-md-6"></div>
        <div class="col-md-3">
            <button type="button" class="btn btn-default btn-sm btn-default-gradient pull-right">
                <span class="glyphicon glyphicon" aria-hidden="true"></span> New Ticket
            </button>
        </div>
    </div>
</div>

我遇到“搜索工具”按钮的问题，它在一个新行中出现了问题。 它看起来像：

我想要的是：

Answer 1

List<T>和form-group应该在这里处理：bootply

form-inline

将我的表单整合到您当前的系统中：

<form class="form-inline">
            <div class="form-group">
              <div class="input-group">
                  <input type="text" class="form-control input-sm" placeholder="Search Ticket" />
                  <span class="input-group-btn">
                       <button class="btn btn-default btn-sm btn-default-gradient" type="button">
                           <i class="glyphicon glyphicon-search"></i>
                       </button>
                  </span>
              </div>
            </div>
            <button type="button" class="btn btn-default btn-sm btn-default-gradient">
                <span class="glyphicon glyphicon" aria-hidden="true"></span> Search Tools
            </button>
</form>

Answer 2

<div class="container">
    <div class="row">
        <div class="col-md-6">
          <div class="form-inline">
            <div class="form-group">
              <div class="input-group">
                  <input type="text" class="form-control input-sm" placeholder="Search Ticket" />
                  <span class="input-group-btn">
                       <button class="btn btn-default btn-sm btn-default-gradient" type="button">
                           <i class="glyphicon glyphicon-search"></i>
                       </button>
                  </span>
              </div>
            </div>
            <button type="button" class="btn btn-default btn-sm btn-default-gradient">
                <span class="glyphicon glyphicon" aria-hidden="true"></span> Search Tools
            </button>
          </div>
        </div>
        <div class="col-md-3"></div>
        <div class="col-md-3">
            <button type="button" class="btn btn-default btn-sm btn-default-gradient pull-right">
                <span class="glyphicon glyphicon" aria-hidden="true"></span> New Ticket
            </button>
        </div>
    </div>
</div>

请注意我将col-md-3增加到col-md-6，因为它不符合表格+按钮。希望这有帮助