我相信这取决于情况，但我个人更喜欢只有一个元素为它.下面是一个可能的解决方案，这可能不是每个人：

<button type="submit" class="btn m-0 p-0">
    <span class="btn btn-danger btn-sm d-md-none">BTN</span>
    <span class="btn btn-danger btn-lg d-none d-md-inline">BTN</span>
</button>

字符串
我假设你的问题的主要问题是关于每个视口大小的不同按钮样式，而不是关于按钮本身的功能。Bootstrap有这些“显示属性符号”和“布局断点”，可以用于处理视口更改的元素。
按钮的子元素是按钮样式化的地方：

*小于768px的视口当视口大小为>=768px时，<span class="btn btn-danger btn-sm d-md-none">BTN</span>元素将在d-md-none的帮助下隐藏。
*大于或等于768px的视口只有在d-none d-md-inline的帮助下，当视口大小为>=768px时，才会出现另一个<span class="btn btn-danger btn-lg d-none d-md-inline">BTN</span>元素。

可以看到工作样本here。调整浏览器宽度以查看结果。

的数据
我上面提供的解决方案不需要额外的自定义样式来处理视口的变化，而且只有一个按钮可以使用。在我看来，它更简单，更容易维护。

我总是面临同样的问题和困境，特别是在使用Bootstrap的时候，我总是想尽可能少地写CSS代码，所以我总是喜欢下面的第一种方法;

方法1 -具有2个按钮;

拥有两个不同的按钮并根据设备宽度显示它们并不是响应式设计的最有效或最佳实践。它可能会导致未来的维护问题，并使代码变得复杂。
但是，这是解决问题的最简单方法。此外，对于进一步的设计请求，您将有两个不同的按钮来进行这些更改。（例如：font-size）。您可以只添加fs-4和fs-6类到按钮。
我们可以通过使用Bootstrap的内置类来实现所需的响应性，而无需编写任何额外的CSS代码。

<form>
    <!-- Other Form Elements -->
    <button type="submit" class="btn btn-danger btn-lg d-none d-md-inline">Login</button>
    <button type="submit" class="btn btn-danger btn-sm d-inline d-md-none">Login</button>
</form>

字符串

方法2 -使用CSS的按钮;

这个解决方案也适用于大多数人，但它需要一点CSS代码来更改按钮宽度。您可以使用CSS媒体查询来设置登录按钮的宽度。

<form>
    <!-- Other Form Elements -->
    <button type="submit" class="btn btn-danger btn-lg login-button">Login</button>
</form>
<style>
@media (min-width: 992px) {
    .login-button {
       width: 120px; /* Adjust the width as you need */
    }
}

@media (max-width: 576px) {
    .login-button {
        width: 60px; 
    }
}
</style>

型
所以，这两种方法都是正确的，它们之间的选择需要权衡，这应该由你根据你的情况来决定。