css - 如何在Bootstrap 3中制作响应式工具栏？

我有一个工具栏，代码如下：

<div class="container">
<div id="main">
<div class="btn-toolbar">
    <a class="btn btn-default" href="action/">Do something</a>
    <form class="col-md-3 input-group pull-right" method="GET">
        <input type="text" name="search" id="id_search" class="form-control" maxlength="200">
        <span class="input-group-btn">
        <button type="submit" class="btn btn-default btn-group" name="submit_search" value="Search">Search</button>
    </span>
    </form>
</div></div></div>

您可以在此小提琴上查看演示：http://jsfiddle.net/Se98n/1/

在较小的屏幕分辨率下，工具栏分为两行，可能只适合一行。

如何使它更具响应性？

我认为它应该保持一行，直到不可能为止，然后，搜索和按钮之间必须保持一定的间距，以保持页面美观。但是，如果布局不奇怪，其他行为仍然可以接受。

最佳答案

参见：http://bootply.com/82277

CSS：

@media (max-width: 480px)
{
    .pull-right{float:none !important;}

    .btn-group > .btn:first-child {
     margin-left: 5px;

       }

    .btn-toolbar > .btn-group:first-child {margin-bottom:15px;}
}

html

<div class="container">
<div id="main">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn btn-default" href="action/">Do something</a>
</div>
<div class="btn-group pull-right">
    <form class="input-group" method="GET">

        <input type="text" name="search" id="id_search" class="form-control" maxlength="200">
        <span class="input-group-btn">
        <button type="submit" class="btn btn-default btn-group" name="submit_search" value="Search">Search</button>
    </span>
    </form>
</div>
</div>
</div>
</div>

关于css - 如何在Bootstrap 3中制作响应式工具栏？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18918735/