将导航按钮分成两行答案

【问题标题】：break navigation buttons into two rows将导航按钮分成两行
【发布时间】：2018-02-18 13:27:42
【问题描述】：

刚开始学习 CSS 一周，我遇到了这个问题。我的页脚有一个导航栏，但我希望它具有响应性，以便当它处于移动模式时，它会分成两排，每排两个按钮（总共 4 个按钮）。

试图弄清楚如何做这几个小时但似乎无法开始工作，不确定它是否与我的按钮元素有关，但我确实想继续使用它。

这是我的html代码：

<footer>
  <!-- include navigation buttons -->
  <nav id="navigation">
    <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">BACK</button>
    <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">MAP</button>
    <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">AREA</button>
    <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">NEXT</button>
  </nav>
</footer>

我也很好奇：如果我想编辑按钮的设计（按钮之间的空间、按钮的宽度等，我该怎么做？）

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

您可以为此使用引导程序Grid。在小屏幕中，2 个按钮将在一行中，在大屏幕中，它们都将在一行中。

<footer>
  <!-- include navigation buttons -->
  <nav id="navigation">
    <div class="row">
      <button class="nav-button col-sm-6 col-md-3 col-lg-3" href="#" style="color: #000000; text-decoration: none;">BACK</button>
      <button class="nav-button col-sm-6 col-md-3 col-lg-3" href="#" style="color: #000000; text-decoration: none;">MAP</button>
      <button class="nav-button col-sm-6 col-md-3 col-lg-3" href="#" style="color: #000000; text-decoration: none;">AREA</button>
      <button class="nav-button col-sm-6 col-md-3 col-lg-3" href="#" style="color: #000000; text-decoration: none;">NEXT</button>
    </div>
  </nav>
</footer>

【讨论】：

【解决方案2】：

这样做：

#navigation div {
  display: inline-block;
}

<footer>
  <!-- include navigation buttons -->
  <nav id="navigation">
    <div>
      <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">BACK</button>
      <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">MAP</button>
    </div>
    <div>
      <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">AREA</button>
      <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">NEXT</button>
    </div>
  </nav>
</footer>

另外，请参阅this fiddle。

我也很好奇：如果我想编辑按钮的设计（按钮之间的空间，按钮的宽度等。我怎么样应该这样做吗？）

查看margin、padding、width、height 等。这些都是基本属性，每本书的第一页都有解释。

【讨论】：

【解决方案3】：

你试过 CSS flex吗？

flex 有很多可能性。

查看Example Code

【讨论】：

【解决方案4】：

首先，使用<a>而不是<button>...href是<a>标签的属性，而不是<button>的属性。

...为了达到效果，您可以使用 Flexbox（它还会删除按钮之间的空格）

...和 media query 移动屏幕规则

...为您的链接设置样式，将 css 应用到 .nav-button

堆栈片段

#navigation {
  display: flex;
  flex-wrap: wrap;
}

a.nav-button {
  flex-basis: 25%;
  background: #ececec;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  text-align: center;
}

@media (max-width:480px) {
  a.nav-button {
    flex-basis: 50%;
  }
}

<footer>
  <!-- include navigation buttons -->
  <nav id="navigation">
    <a class="nav-button" href="#" style="color: #000000; text-decoration: none;">BACK</a>
    <a class="nav-button" href="#" style="color: #000000; text-decoration: none;">MAP</a>
    <a class="nav-button" href="#" style="color: #000000; text-decoration: none;">AREA</a>
    <a class="nav-button" href="#" style="color: #000000; text-decoration: none;">NEXT</a>
  </nav>
</footer>

【讨论】：