如何在较小的屏幕尺寸上将按钮展开为全角？

Question

我有以下标记：

<div class="ml-auto text-right">
    <button class="btn btn-next mobile" />
</div>

和

css

：

@media screen and (max-width: 576px) {
  .mobile {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    display: block;
    text-align: center;
  }
}

我想在桌面上显示右对齐的按钮，并在移动设备上扩展到全宽。

但是，上面的方法不起作用。

实现这一目标的正确方法是什么？

Answer 1

通过使用常见的移动优先方法，您可以简化事情：

这是笔

.mobile {
  width: 100%;
}

// note how we changed this from "max-with" to "min-width"
@media screen and (min-width: 576px) {
  .mobile {
    width: auto;
  }
}