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;">  <div class="form-group">  <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>下面：

{{1}}

<强> Fullscreen DEMO

input-group继续扩展到全宽

1 个答案: