我正在构建一个基于浏览器的移动应用程序,我决定使用Bootstrap 3作为设计的css框架.Bootstrap 3在导航栏中提供了一个很棒的"响应"功能,如果它检测到有关浏览器分辨率的特定"断点",它会自动折叠.它适用于很多情况.
但是你最近注意到很多基于浏览器的移动应用程序如何将主导航隐藏在屏幕左侧,当在右上角按下(切换)切换图标时,主导航滑出到大约2/3进入屏幕的权利？这是一种越来越流行的解决方案,用于在移动设备上浏览基于浏览器的应用程序,我认为理论上应该很容易修改bootstrap css/js以适应此版本的导航折叠功能.
如何实现这些功能？似乎不应该采取太多修改.我真的很想听听你对此事的想法/解决方案.此外,我认为Bootstrap作为内置功能实现是一个很好的长期解决方案.
不幸的是,我没有尝试创建这个功能,因为虽然我熟悉这些技术,但我主要是一个PHP/MySQL开发人员,我相信一个有用的功能应该由具有洞察力的专家构建,我没有作为前端开发人员.
有没有办法从水平而不是垂直折叠Bootstrap Collapse插件？看看代码这个能力似乎没有内置,但我希望我只是遗漏了一些东西......
任何帮助将不胜感激.谢谢!
我知道你可以在"variables.less"文件中更改@ grid-float-breakpoint,它编译成我们都下载和使用的bootstrap包(我认为).
bootstrap/
??? css/
? ??? bootstrap.css
? ??? bootstrap.min.css
? ??? bootstrap-theme.css
? ??? bootstrap-theme.min.css
??? js/
? ??? bootstrap.js
? ??? bootstrap.min.js
??? fonts/
??? glyphicons-halflings-regular.eot
??? glyphicons-halflings-regular.svg
??? glyphicons-halflings-regular.ttf
??? glyphicons-halflings-regular.woff
我的问题是,如果不自定义新的引导程序包,可以更改@ grid-float-breakpoint,而是使用@media或其他方法通过CSS更改它.如果可能,请建议在何处以及如何执行此操作的方法.谢谢
我正在使用最新版本的bootstrap.我自己尝试了各种各样的东西,之后我想我可能会在stackoverflow上找到一些东西.但善良没有得到这个东西.我的意思是它如何运作？
这是我的代码.我不会在这里添加任何自定义样式,因为它们没有真正起作用,反而他们创建了一些错误.
我也检查了这篇文章也Bootstrap - 如何从左边而不是从顶部滑动导航栏我尝试了所有的答案,但它不适合我.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="">Roknil Style</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav> …