HTML/CSS : Getting links styled like buttons to stack

Question

我目前正在使用 HTML/CSS (Bootstrap) 开发一个简单的元素。非常简单，我的任务是将链接样式设置为看起来像按钮，并让它们堆叠在移动 View 中。

要求:按钮在常规/桌面 View 中应并排放置，在 iPhone/Android 设备中应堆叠在一起。

代码笔:https://codepen.io/anfperez/pen/joqoXG

这是我目前的代码:

html

<a class="button-a" href="www.google">Link that looks like button</a>
<a class="button-b" href="www.amazon.com">Another link that looks like a button</a>

css(可以包含Bootstrap)

.button-a, .button-b {
  background-color: blue;
  color: white;
  text-decoration: none;
  padding: 10px;
}

.button-a {
  background-color: blue
}

.button-b {
  background-color: red;
}

当我尝试在移动 View 中查看代码时，红色按钮按钮最终重叠在蓝色按钮之上，因为它们都是链接。我怎样才能让红色按钮清除蓝色按钮？在这种情况下，我不能使用 Bootstrap 的 btn-group。

Answer 1

您可以在媒体查询中使用 Flexbox 来使用 flex-direction: column 堆叠元素。

.button-a, .button-b {
  background-color: blue;
  color: white;
  text-decoration: none;
  padding: 10px;
}

.button-a {
  background-color: blue
}

.button-b {
  background-color: red;
}

@media (max-width: 767px) {
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

<div class="wrapper">
  <a class="button-a" href="www.google">Link that looks like button</a>
  <a class="button-b" href="www.amazon.com">Another link that looks like a button</a>
</div>