Css 如何重新订购<；ul>；基于屏幕大小在导航栏中水平对齐的元素（引导）

在我的html页面中，元素在导航栏中正确固定

1 2 3 4 5 6 7 

当屏幕较小时，元素垂直

1
2
3
4
5
6

我已经设法减小了导航栏的大小，但是元素是垂直的。我需要

li

元素在

navbar

中以小字体水平对齐。下面给出了我用来减少导航栏的代码

@仅媒体屏幕和（最小宽度：400px）和（最大宽度：992px）{
navbar先生{
垫面：0.25rem；
垫底：0.25rem；
高度：54px
}
.navbar.NavUL{
填充顶部：5px！重要；
填充底部：0！重要；
高度：30px；
字体大小：较小；
显示：内联；
}
}

字节程序


1


2


3


4

您遇到了一些问题，主要不是覆盖引导基样式

默认情况下，

.navbar.nav

是一个弹性项，在较小的屏幕上，它的

弹性方向

是

列

——因此我将其设置为

行

.navbar.nav ul

也是一个弹性父级，弹性方向设置为

列

，因此我将其设置为行。由于

ul

不够具体，无法覆盖引导样式，我添加了类选择器

ul.navbar nav

，因此它比引导更具体

ul.navbar-nav

也是一个flex子项，因此您可以设置它的

flex

属性（

flex:1100%

）

我还为您的

li

项目添加了一些

margin

，这样您就可以看到它在工作了

你的

最小宽度：400px

没有理由，除非你有其他风格的东西。我在示例中删除了它，但您肯定可以将其放回

@介质（最大宽度：992px）{
navbar先生{
垫面：0.25rem；
垫底：0.25rem；
高度：54px
}
.navbar.nav{
弯曲方向：行；
}
.navbar.nav ul.navbar-nav{
填充顶部：5px！重要；
填充底部：0！重要；
高度：30px；
字体大小：较小；
弹性：1100%；
弯曲方向：行；
证明内容：柔性端；
}
.navbar.NavUL.navbar-NavLi{
利润率：0.10px；
}
}

字节程序


1


2


3


4

欢迎使用堆栈溢出！请张贴您的HTML以及。CSS只是我们需要帮助您的一半。请仔细阅读，因为我已经按照你的建议做了，谢谢你欢迎我加入这个社区！你在使用引导程序吗？或者其他CSS框架？@Desifor我正在使用bootstrapit，效果很好。谢谢！