菜单栏有几行而不是崩溃（Bootstrap）(Menu bar with few rows instead of collapse (Bootstrap))

菜单栏有几行而不是崩溃（Bootstrap）(Menu bar with few rows instead of collapse (Bootstrap))

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

在大型显示器上

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

在中间显示

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

在小显示屏上

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

Is it possible to create so menu bar with Twitter Bootstrap 3 with buttons and dropdowns:

On large display

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

On middle display

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

On small display

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

最满意答案

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

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

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

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

这是一个快速的小提琴： http ： //jsfiddle.net/nMGfT/

By using media queries, you should be able to set the with to 100% on small screens, 30-33% on medium screens (if you know there always be three), and whatever you need for it to be on big screens.

If you add this .css-line to the parent element - e.g. ul.

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

each menu item should align themself as justified.

Here's a quick jsfiddle: http://jsfiddle.net/nMGfT/