html - 所选值应使用 Bootstrap 在导航栏中折叠

标签 html css twitter-bootstrap

我想在平板电脑和更大的屏幕上设计一个类似这样的导航栏。
desktop navbar

在较小的屏幕上应该是这样的。 smaller screen

点击切换按钮时,所有数据都应垂直对齐。

我尝试了一些东西但没有奏效。只使用 bootstrap 有可能吗?如果是,如何解决这个问题。

这是我试过的代码(不准确,因为我改变太多了)。

code

JSfiddle

ps:- 使用 bootstrap3

最佳答案

这里的问题是你没有使用 Bootstrap 网格

内部<div class="row"></div> ,boostrap 网格被分成 12 个相等的部分,具有 4 个宽度大小的断点。有关详细信息,您应该阅读 Boostrap 3 Grid documentation

关于html - 所选值应使用 Bootstrap 在导航栏中折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49017649/

相关文章:

html - 悬停选择器差异 z-index

php - 使用 php、mysql 和 html 创建登录表单但无法登录

javascript - 如何添加 id on has error div in form validation

html - Bootstrap Pills 在小屏幕上不可点击

python - 查找包含特定文本的 HTML 标记

html - 如何使用静态字符串为分层有序列表项编号添加前缀

html - 纯 CSS 幻灯片单选按钮(第四个按钮作为第一个?)

CSS自动宽度div

javascript - 如何根据 AngularJS 输入 class=ng-invalid 设置 Twitter Bootstrap class=error?

jquery - Bootstrap jQuery 在页面加载时显示特定选项卡