Html 如何将垂直列表转换为水平列表（使用引导和媒体查询）？

正在尝试将此列表转换为小屏幕大小的水平。尝试了很多事情，但都没有成功。这可能很简单，但我正在启动引导程序并创建一个布局移位器模式

下面是代码的HTML和CSS

.集装箱{ 显示：-webkit flex； 显示器：flex； -webkit flex流：行换行； 柔性流：行换行； 背景色：E57373； } 李{ 显示：块； } @媒体最小宽度：@屏幕最小宽度{ 李先生{ 显示：内联； 宽度：100%； } } 家 联系 关于我们 布局移位器模式是响应最快的模式，在多个屏幕宽度上有多个断点。这种布局的关键是内容的移动方式，而不是回流和下降到其他列下面。由于存在显著差异 在每个主要断点之间，维护更为复杂，可能涉及元素内部的更改，而不仅仅是整个内容布局

---

这就是你要找的吗

出于测试目的，我将媒体查询更改为max width:900px；。你可以把它设置回任何需要的状态

基本上，我只是添加了display:flex；到元素。我还将文本放在元素的中心。如果你不想让菜单在屏幕上伸展，你可以给它设置一些宽度。让我知道如果我可以帮助任何进一步

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  background-color: #E57373;
}

li {
  display: block;
}

@media (min-width: @screen-sm-min) {
  .menu li {
    text-align: center;
    display: inline;
    width: 100%;
  }
  .menu ul {
    display: flex;
  }
}

---

这就是你要找的吗

出于测试目的，我将媒体查询更改为max width:900px；。你可以把它设置回任何需要的状态

基本上，我只是添加了display:flex；到元素。我还将文本放在元素的中心。如果你不想让菜单在屏幕上伸展，你可以给它设置一些宽度。让我知道如果我可以帮助任何进一步

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  background-color: #E57373;
}

li {
  display: block;
}

@media (min-width: @screen-sm-min) {
  .menu li {
    text-align: center;
    display: inline;
    width: 100%;
  }
  .menu ul {
    display: flex;
  }
}

---

主要问题是您指定了display:flex on.container

Flex属性仅在父元素和子元素之间工作

因此，当您将.container设置为flex容器时，这意味着它唯一的子.row将成为flex项。导航项从不与flex对齐，因为flex属性不会被树结构下的元素继承

因此，请尝试以下方法：

.container ul {
  display: flex;
  flex-direction: column;
}

@media ( max-width: 800px ) {
  .container ul { flex-direction: row; }
}

.集装箱ul{ 显示器：flex； 弯曲方向：立柱； 列表样式类型：无； 背景色：E57373； } @介质最大宽度：800px{ .container ul{flex direction:row；} .container ul li{边距：5px；} } 家 联系 关于我们

---

主要问题是您指定了display:flex on.container

Flex属性仅在父元素和子元素之间工作

因此，当您将.container设置为flex容器时，这意味着它唯一的子.row将成为flex项。导航项从不与flex对齐，因为flex属性不会被树结构下的元素继承

因此，请尝试以下方法：

.container ul {
  display: flex;
  flex-direction: column;
}

@media ( max-width: 800px ) {
  .container ul { flex-direction: row; }
}

.集装箱ul{ 显示器：flex； 弯曲方向：立柱； 列表样式类型：无； 背景色：E57373； } @介质最大宽度：800px{ .container ul{flex direction:row；} .container ul li{边距：5px；} } 家 联系 关于我们

---

你在找这样的东西吗

---

在这里，lis是小屏幕上的块元素和具有一定边距的内联块，以在它们之间获得一定距离，并在更宽的屏幕上获得更好的垂直定位。我使用600px进行媒体查询。此外，我在ul中添加了padding:0以避免其默认的padding。

您正在寻找类似的内容吗

在这里，lis是小屏幕上的块元素和具有一定边距的内联块，以在它们之间获得一定距离，并在更宽的屏幕上获得更好的垂直定位。我使用600px进行媒体查询。另外，我在ul中添加了padding:0以避免其默认填充。

试试这个

将特定屏幕的li标记样式“显示：块”更改为“显示：内联块”

@media (min-width: @screen-sm-min) {
li {
  display: inline-block;
}
}

试试这个

将特定屏幕的li标记样式“显示：块”更改为“显示：内联块”

@media (min-width: @screen-sm-min) {
li {
  display: inline-block;
}
}

---

完成了任务。谢谢，你做得很好。非常感谢。