菜单栏有几行而不是崩溃(Bootstrap)

时间:2014-02-18 13:23:49

标签: twitter-bootstrap

是否可以使用带有按钮和下拉菜单的Twitter Bootstrap 3创建菜单栏:

在大显示屏上

---------------------------------------
btn1 | btn2 | btn3| btn4 | btn5 | btn6| 
---------------------------------------

在中间显示屏

-------------------
btn1 | btn2 | btn3|
-------------------
------------------
btn4 | btn5 | btn6|
-------------------

小显示屏

------
btn1 |
------
------
btn2 |
------
------
btn3 |
------
------
btn4 |
------
------
btn5 |
------
------
btn6 |
------

1 个答案:

答案 0 :(得分:0)

通过使用媒体查询,您应该能够在小屏幕上将百分比设置为100%,在中等屏幕上设置为30-33%(如果您知道总是有三个),以及您需要的大小屏幕。

如果将此.css-line添加到父元素 - 例如ul

text-align:justify; &:after { content: ''; width: 100%; display: inline-block; }

每个菜单项都应该对齐自己。

这是一个快速的jsfiddle:http://jsfiddle.net/nMGfT/