Question

我使用bootstrap我有搜索栏和按钮但是当我最小化浏览器或者以响应方式打开开发人员工具时，搜索按钮会从搜索栏移开，如何将它们组合在一起？

＆＃13;

<!--START SEARCH-->
<div class="col-sm-6 col-md-3" style="float: center">
    <ul class="nav navbar-nav navbar-center">
        <li>
            <form class="navbar-form" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="q">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                    </div>
                </div>
            </form>
        </li>
    </ul>
</div>
<!--END SEARCH-->

＆＃13;

Answer 1

我会建议这样的事情。 calc（）样式属性确保您的按钮始终有足够的空间。

        <div class="input-group" style="width: 100%;">
            <input class="form-control" placeholder="Search" name="q" style="width: calc(100% - 80px);display: inline-block;" type="text">
            <div class="input-group-btn" style="width: 60px;display: inline-block;">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>

您必须调整像素数，并且可能不需要.input-group的width属性，因为您使用bootstrap。

搜索按钮远离搜索栏

1 个答案: