HTML/CSS：将链接样式设置为按钮堆栈

我目前正在用HTML/CSS（Bootstrap）进行一个简单的项目。非常简单，我的任务是将链接设计成按钮的样式，并将它们堆叠在移动视图中

要求：在常规/桌面视图中，按钮应并排放置，在iPhone/Android设备中，按钮应相互堆叠

代码笔：

以下是我目前掌握的代码：

html

---

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

您可以在媒体查询中使用

Flexbox

来使用

flex direction:column

堆叠元素

.button-a、.button-b{
背景颜色：蓝色；
颜色：白色；
文字装饰：无；
填充：10px；
}
.按钮a{
背景颜色：蓝色
}
.按钮b{
背景色：红色；
}
@介质（最大宽度：767px）{
.包装纸{
显示器：flex；
弯曲方向：立柱；
调整项目：灵活启动；
}
}

---

您可以在媒体查询中使用

Flexbox

来使用

flex-direction:column

堆叠元素

.button-a、.button-b{
背景颜色：蓝色；
颜色：白色；
文字装饰：无；
填充：10px；
}
.按钮a{
背景颜色：蓝色
}
.按钮b{
背景色：红色；
}
@介质（最大宽度：767px）{
.包装纸{
显示器：flex；
弯曲方向：立柱；
调整项目：灵活启动；
}
}

---

…真的吗？可以创建div的have行为，如果希望它们进行堆栈，只需使button类具有inline块即可

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

---

这使得a链接具有像div一样的边距和填充行为。您只需设置宽度。。因此，如果媒体画布变短，链接将自动堆叠

…真的吗？可以创建div的have行为，如果希望它们进行堆栈，只需使button类具有inline块即可

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

这使得a链接具有像div一样的边距和填充行为。您只需设置宽度。。因此，如果媒体画布较短，链接将自动堆叠

.button-a、.button-b{
背景颜色：蓝色；
颜色：白色；
文字装饰：无；
填充：10px；
利润率：20px；
显示：块；
}
.按钮a{
背景颜色：蓝色
}
.按钮b{
背景色：红色；
}

.button-a、.button-b{
背景颜色：蓝色；
颜色：白色；
文字装饰：无；
填充：10px；
利润率：20px；
显示：块；
}
.按钮a{
背景颜色：蓝色
}
.按钮b{
背景色：红色；
}

旁注：第二个链接的href为“ahref”。旁注：第二个链接的href为“ahref”。还请添加一些解释，因为只有代码的答案被视为低质量。还请添加一些解释，因为只有代码的答案被视为低质量。

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