平板电脑和移动相同的布局与bootstrap 3

Question

如何使用bootstrap 3为移动设备和平板电脑设计相同类型的布局。

我的导航栏在手机和平​​板电脑中看起来不一样。平板电脑中的导航栏与桌面相同。但我希望它看起来像移动设备。

Answer 1

Bootstrap 3的解决方案在这里：http://getbootstrap.com/components/#navbar

Customize the collapsing point

Depending on the content in your navbar, you might need to change the point at 
which your navbar switches between collapsed and horizontal mode. Customize the 
@grid-float-breakpoint variable or add your own media query.

所以解决方案是Customize the @grid-float-breakpoint variable or add your own media query.

所以制作 MQ css 之类的：

@media only screen and (max-width: 768px)/*or ur preferred width*/ {
 /* style here */
}

我建议你为此制作一个单独的CSS并让bootstrap文件原样！

Answer 2

/ *平板电脑设备，台式机和笔记本电脑屏幕* /

@media only screen and (max-width: 768px) {
 // Code to minimize menu

.navbar-collapse {
max-height: 340px;
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}

.collapse {
display: none;
}

}