如何在 Bootstrap 3 中制作响应式工具栏？答案

【问题标题】：How to make responsive Toolbar in Bootstrap 3?如何在 Bootstrap 3 中制作响应式工具栏？
【发布时间】：2013-09-21 07:29:55
【问题描述】：

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

<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>

你可以在这个 Fiddle 上查看演示：http://jsfiddle.net/Se98n/1/

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

如何使它更具响应性？

我认为它应该保持在一条线上，直到不可能为止，然后，搜索和按钮左对齐，然后在它们之间留出一些空间以保持页面美观。但如果布局不保持怪异，其他行为仍然可以接受。

【问题讨论】：

<form class="col-md-3 col-sm-9 col-xs-8 input-group pull-right" method="GET"> 做这样的事情，使用sm 和xs 用于较小的尺寸。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：