Question

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

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

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

如何让它更具响应性？

我认为它应该保持在一行直到不可能，然后，搜索和按钮左右对齐，然后保持页面美观。但如果布局不那么奇怪，其他行为仍然可以接受。

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

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

1 个答案: