作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我创建了一个导航栏,左侧是品牌名称和搜索框,右侧是菜单。
这是 bootply link
这在大屏幕上很好,但在小屏幕上,我想在顶部将其显示为两个栏,第一个栏显示左侧内容(品牌名称和搜索栏),第二个栏显示右侧内容(菜单)。我可以只使用 Bootstrap 类来做到这一点吗?
最佳答案
试试这个:
使用隐藏
类
<nav class="navbar navbar-default fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="hidden-xs hidden-sm">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default hidden-md hidden-lg" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
</ul>
</div>
</div>
</nav>
关于html - Bootstrap : How to make navbar two layered on small screens,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25519634/
我是一名优秀的程序员,十分优秀!