Bootstrap 3选项卡式搜索框响应

Question

我使用Bootstrap 3创建一个标签式搜索框，就像我提供的演示*中那样。我想让它对移动版本做出响应。

具体来说，当您调整寡妇的大小并且ul到达表单的末尾时，li项将在某个断点处堆叠3乘3，然后随着它变得越来越窄，所有这些都将是堆叠。

*以下是演示：http://jsfiddle.net/hvS43/2/

**这里可以看到一个例子：http://library.nd.edu/

Answer 1

我没有看到HTML的“头部”部分，但我首先检查以确保其中包含以下行：

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

尝试在li类中使用 col-xs-6 ....然后使用@media查询来设置所需的样式。如果有帮助，请告诉我

Answer 3

您需要为选项卡编写媒体查询，例如：

@media (min-width:768px){
.nav-tabs>li>{width:50%;}
}

为其他视口编写，这里是bootstrap media-queries ..

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }