输入组继续扩展到全宽

Question

我正在尝试阻止输入组（搜索框）扩展至全宽：

目前输入组在一个跨度内，这样当页面变小时我可以隐藏它，如果我将它添加到一个 div，那么我可以设法通过定义宽度的内联样式使其更小，但它保留在自己的一行中，而不是全部在一行中。

这是我的 HTML：

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-group br">
            <button type="button" class="btn btn-success create-seller">
                <span class="glyphicon glyphicon-plus"></span>
                Create Seller
            </button>
            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#seller-create" target="_blank">Create Seller In New Window</a></li>
            </ul>
        </div>
        <div class="btn-group br">
            <button type="button" class="btn btn-primary update-existing update-seller">
                <span class="glyphicon glyphicon-floppy-save"></span>
                Save Seller
            </button>
        </div>

        <span class="visible-lg-inline">
            <div class="btn-group br">
                <button type="button" class="btn btn-primary goto-first">
                    <span class="glyphicon glyphicon-fast-backward"></span>
                </button>
                <button type="button" class="btn btn-primary goto-prev">
                    <span class="glyphicon glyphicon-step-backward"></span>
                </button>
                <button type="button" class="btn btn-primary clear-search">
                    <span class="glyphicon glyphicon-refresh"></span>
                </button>
                <button type="button" class="btn btn-primary goto-next">
                    <span class="glyphicon glyphicon-step-forward"></span>
                </button>
                <button type="button" class="btn btn-primary goto-last">
                    <span class="glyphicon glyphicon-fast-forward"></span>
                </button>
            </div>
        </span>
        <span class="visible-lg-inline">
            <div class="input-group br">
                <span class="input-group-btn">
                    <a href="#" class="btn btn-primary qr-code">
                        <span class="glyphicon glyphicon-qrcode"></span>
                    </a>
                </span>
                <input class="form-control search top" type="search" name="search" placeholder="Search">
                <span class="input-group-btn">
                    <div class="btn-group">
                        <button class="btn btn-primary search top dropdown-toggle" type="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-search"></span>
                            Search
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a class="top seller-identifier" href="#">Seller Number</a></li>
                            <li><a class="top seller-name" href="#">Seller Name</a></li>
                            <li><a class="top id-number" href="#">ID Number</a></li>
                            <li><a class="top company-name" href="#">Company Name</a></li>
                            <li><a class="top seller-email" href="#">Email</a></li>
                            <li class="divider"></li>
                            <li><a class="clear-search" href="#">Clear Search</a></li>
                        </ul>

                    </div>
                </span>
            </div>
        </span>
    </div>
</div>

唯一相关的 CSS 类是 br 元素，它在元素换行到下一行时为元素提供边距：

  br {
    display: block;
    margin: 15px 0;
    line-height: 15px;
    content: " ";
  }

知道如何让搜索框不换行到第二行而是填充右上角的空间吗？

Answer 1

将.visible-lg-inline 内的元素包装成form 类navbar-form 并将display:inline 设置为form 和一个类form-group 的div，如下所示：

<span class="visible-lg-inline">
  <form class="navbar-form" style="display: inline;"> <!--Wrap it with form-->
          <div class="form-group"> <!--div with form-group class-->
            <div class="input-group br">
                <span class="input-group-btn">
                    <a href="#" class="btn btn-primary qr-code">
                        <span class="glyphicon glyphicon-qrcode"></span>
                    </a>
                </span>
                <input class="form-control search top" type="search" name="search" placeholder="Search">
                <span class="input-group-btn">
                    <div class="btn-group">
                        <button class="btn btn-primary search top dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-search"></span>
                            Search
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a class="top seller-identifier" href="#">Seller Number</a></li>
                            <li><a class="top seller-name" href="#">Seller Name</a></li>
                            <li><a class="top id-number" href="#">ID Number</a></li>
                            <li><a class="top company-name" href="#">Company Name</a></li>
                            <li><a class="top seller-email" href="#">Email</a></li>
                            <li class="divider"></li>
                            <li><a class="clear-search" href="#">Clear Search</a></li>
                        </ul>

                    </div>
                </span>
            </div>
    </div>
  </form>
</span>

Fullscreen DEMO