将组件对齐在一行中

Question

我有一个使用bootstrap 3.0的以下html代码

<div class="container">
    <div class="input-group" style="width: 300px">
        <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 class="btn-group pull-left" >
        <button type="button" class="btn btn-default btn-sm btn-default-gradient">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search Tools
        </button>
    </div>

    <div class="btn-group pull-right" >
        <button type="button" class="btn btn-default btn-sm btn-default-gradient">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span> New Ticket
        </button>
    </div>
</div>

现在的样子：

Exected：

如何达到预期效果？

Answer 1

There you go

您需要使用display: inline;属性。

Answer 2

尝试使用bootstrap的原生.inline-form类。

将html包装成带有'form-inline'类的div，如下所示：

    <form class="form-inline">
     <div class="container">
        <div class="input-group" style="width: 300px">
            <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 class="btn-group pull-left" >
            <button type="button" class="btn btn-default btn-sm btn-default-gradient">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search Tools
            </button>
        </div>

        <div class="btn-group pull-right" >
            <button type="button" class="btn btn-default btn-sm btn-default-gradient">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span> New Ticket
            </button>
        </div>      
     </div>
    </form>

http://jsfiddle.net/xnngmf1b/5/

请参阅此链接：http://getbootstrap.com/css/#forms-inline

PS：它仅适用于大屏幕设备＆gt; 768px。