Question

尝试将此列表转换为水平以获得较小的屏幕尺寸。尝试过很多东西，但没有任何效果。这可能很简单，但我正在启动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>

Answer 1

这是你要找的吗？

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

Answer 2

试试这个

将li标记样式显示：阻止更改为特定屏幕的 display：inline-block 。

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

Answer 3

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

Flex属性仅适用于父元素和子元素。

因此，当您使.container成为灵活容器时，这意味着.row（其唯一的子项）将成为弹性项目。导航项永远不会弯曲对齐，因为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

Answer 4

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

https://jsfiddle.net/g45qq2jx/

这里li是小屏幕上的块元素和内联块（有一些margin可以在更宽的屏幕上获得一些距离和更好的垂直定位）（我使用了600px媒体查询）。此外，我向padding: 0添加了ul以避免其默认填充。

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

4 个答案: