2

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

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

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

我怎样才能使它更具响应性？

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

4

1 回答 1

2

见：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>
于 2013-09-20T23:29:55.040 回答