如何将垂直列表转换为水平列表（使用 Bootstrap 和媒体查询）？答案

【问题标题】：How to convert a vertical list to horizontal (using Bootstrap and media queries)?如何将垂直列表转换为水平列表（使用 Bootstrap 和媒体查询）？
【发布时间】：2017-04-20 14:08:47
【问题描述】：

一直在尝试将此列表转换为小屏幕尺寸的水平列表。尝试了很多东西，但没有任何效果。这可能很简单，但我正在启动 Bootstrap 并正在创建一个 Layout Shifter 模式。

这里是代码的 HTML 和 CSS。

.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 {
    display: inline;
    width: 100%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="menu">
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <ul>
          <li><a style="cursor: pointer;">Home</a></li>
          <li><a style="cursor: pointer;">Contact</a></li>
          <li><a style="cursor: pointer;">About Us</a></li>
        </ul>
      </div>
    </div>
    <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12" style="background-color: #FFCDD2">
      <p>The layout shifter pattern is the most responsive pattern, with multiple breakpoints across several screen widths. Key to this layout is the way content moves about, instead of reflowing and dropping below other columns. Due to the significant differences
        between each major breakpoint, it is more complex to maintain and likely involves changes within elements, not just overall content layout.</p>
    </div>
  </div>
</div>

【问题讨论】：

标签： html twitter-bootstrap css flexbox

【解决方案1】：

主要问题是你在.container上指定了display: flex。

Flex 属性仅在父元素和子元素之间起作用。

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

所以试试这个吧：

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

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

.container ul {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  background-color: #E57373;
}

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="menu">
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <ul>
          <li><a style="cursor: pointer;">Home</a></li>
          <li><a style="cursor: pointer;">Contact</a></li>
          <li><a style="cursor: pointer;">About Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

jsFiddle demo

【讨论】：

【解决方案2】：

试试这个

将特定屏幕的 li 标签样式 display: block 更改为 display: inline-block。

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

【讨论】：

【解决方案3】：

这就是你要找的吗？

https://jsfiddle.net/nerq0ero/

出于测试目的，我将媒体查询更改为max-width: 900px;。您可以将其设置回所需的任何值。

基本上，我只是将display: flex; 添加到<ul> 元素中。我还将文本集中在 <li> 元素上。如果您不希望菜单在屏幕上伸展，您可以为其设置某种宽度。如果我能提供进一步的帮助，请告诉我！

.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;
  }
}

【讨论】：

完成了这项工作。谢谢。

【解决方案4】：

你在寻找这样的东西吗？：

https://jsfiddle.net/g45qq2jx/

这里的lis 是小屏幕上的块元素和更宽屏幕上的内联块（有一些margin 以使它们之间保持一定距离和更好的垂直定位）（我使用600px 进行媒体查询）。此外，我将padding: 0 添加到ul 以避免其默认填充。

【讨论】：