Bootstrap v3.3.2导航栏断点

我是一名Bootstrap新手，我只是将网页上的布局排序，包括响应式设置。Bootstrap v3.3.2导航栏断点

的测试环节就在这里 -

http://www.leedsinkcartridges.co.uk/testrs/index.html

我拥有这一切我所想要的，除了iPad平板肖像覆盖的媒体点768px到991px。

我抄Bootly CSS来调整这里讨论的媒体查询断点 - bootply.com/105174

试图在我的styles.css文件的底部这段代码，它显示了汉堡包菜单，但它显示我的导航一间酒吧，而不是一个堆栈酒吧 -

@media (min-width: 768px) and (max-width:991px) 
{ 
    site-navigation 
    { 
     position: absolute; 
     top: 50%; 
     right: 20px; 
     transform: translate(0, -50%); 
     -webkit-transform: translateY(-50%); 
    } 
    .nav-invert .site-navigation 
    { 
     left: 20px; 
     right: 0; 
    } 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 



}

Dropbox的链接文件是在这里 -

https://www.dropbox.com/s/cxn91itr8ek2d9k/ipad_portrait.zip?dl=0

引导CSS是版本v3.3.2

该网站的CSS目前有点混乱，所以道歉！

任何想法如何解决它，因为它几乎在那里！

谢谢，

戴夫。

来源

2015-04-16 davehalo1

嗨，你可以为此设置工作JSFIDDLE。所以对我来说复制会更容易。谢谢。 –

嗨Kushal，是的，我会准备好一些东西，当我完成它时，我会给你发推文，谢谢。 – davehalo1

作为最佳实践的一部分，我不希望您在项目中抓取某人的CSS。

除此之外，您可以按照post中提到的所有3种方法。

此外，我还在相同的article上添加了comment，这就是您的问题的确切解决方案。该解决方案不需要任何CSS更改。

下面引用的是和comment一样的供您参考。请参考它，你也可能需要访问Bootstrap页面customize and download！

如果你想在768px（屏幕SM-分钟）折叠导航栏，那么你并不需要定制什么，因为默认情况下导航栏会引导在768px崩溃。

不过，当然，如果你需要它在992px（屏幕-MD-分钟）被压扁，可以为“@网浮法断点”与 “@屏幕-SM-分钟”改变价值。以“@ screen-lg-min”或 “@ screen-xs-min”的方式执行同样的操作。

谢谢。

希望你从中找到解决办法。

谢谢。

来源

2015-04-17 08:30:17

Bootstrap v3.3.2导航栏断点

回答

相关问题