Question

我在下拉菜单中添加了搜索表单。我尝试了不同的css规则，但未能阻止按钮进入下一行。以下是我原来的HTML代码：

<div class="dropdown-menu" style="padding:17px;">
    <form id="navbar-search" role="search" action="/discover" method="post">
        <input class="form-control" type="search" name="query" placeholder="Search"/>
            <button type="button" class="btn btn-primary" title="Search">
                <span class="glyphicon glyphicon-search" aria-hidden="true"/>
            </button>
    </form>
</div>

这就是它的样子：

button-wrapped

我希望按钮放在输入表单旁边，如下所示：

button-not-wrapped

提前致谢。

Answer 1

http://jsfiddle.net/vvj1qorj/

这是一个快速黑客：

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <div class="dropdown-menu" style="padding:17px;">
                    <form id="navbar-search" role="search" action="/discover" method="post" class="btn-group  "> 
                        <div class="btn-group input-group">
                        <input class="form-control" type="search" name="query" placeholder="Search"/>
                        </div>
                        <button type="button" class=" btn btn-primary pull-right" title="Search"><span class="glyphicon glyphicon-search" aria-hidden="true" />
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 2

还有Bootstrap input groups。

您可以通过更改.search-me form

的右侧填充来缩小空间

enter image description here

DEMO：https://jsbin.com/mosiwi/1/edit?html,css,output

<强> CSS

.search-me form {
    position: relative;
    padding: 10px 55px 10px 10px;
}
.search-me .btn {
    position: absolute;
    right: 10px;
    top: 10px;
}
.dropdown-menu-300 {
    min-width: 300px
}

<强> HTML：

<div class="dropdown">
   <a href="#" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
      Dropdown <span class="caret"></span>
   </a>
   <ul class="dropdown-menu dropdown-menu-300" role="menu">
      <li class="search-me">
         <form id="navbar-search" role="search" action="/discover" method="post">
            <input class="form-control" type="search" name="query" placeholder="Search"/>
            <button type="button" class="btn btn-primary" title="Search">
            <span class="glyphicon glyphicon-search" aria-hidden="true"/>
            </button>
         </form>
      </li>
   </ul>
</div>

如何防止包装下拉菜单中的按钮？

2 个答案: