隐藏其中一个按钮，是个好方法吗？[关闭]-解网

问：

想改进这个问题吗？更新问题，以便可以通过编辑这篇文章用事实和引文来回答。

20天前关闭。

改进此问题

所以我想创建一个登录表单。我正在使用 Bootstrap（使用 CDN）来快速设置我的表单样式。我最初给了我的按钮类.但是随着设备宽度变小，我需要一个更小的按钮，但是如果设备宽度变小，我不知道如何关闭和打开。因此，我创建了两个具有相同文本和属性的按钮，如果设备宽度小于 767px，则我为 768px 设置，如果宽度大于 768px，则相同。就前端而言，这工作正常。我想知道这是否是一种好的做法，它会给我未来的发展带来问题吗？下面是我的代码片段： HTML格式：.btn .btn-danger .btn-lg.btn-lg.btn-smdisplay: none;.btn-lg.btn-sm

<form class="form-group">
    <input type="text" class="form-control" name="user" placeholder="Username" required>
    <input type="password" class="form-control" name="pwd" placeholder="Password" required>
    <p>Forgot your password?</p>
    <button type="submit" class="btn btn-danger bg-gradient btn-lg">LOG IN</button>
    <button type="submit" class="btn btn-danger bg-gradient btn-sm">LOG IN</button>
</form>

CSS：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.btn-danger {
    background-color: orangered;
    color: white;
}

.btn-lg {
    border-radius: 30px;
    display: none;
}

.btn-sm {
    border-radius: 30px;
}

@media screen and (min-width: 768px) {
    .btn-lg {
        display: block;
        margin: auto;
    }

    .btn-sm {
        display: none;
    }
}

html css twitter-bootstrap 前端

视口小于 768 像素当视口大小在的帮助下，此元素将被隐藏。<span class="btn btn-danger btn-sm d-md-none">BTN</span>>=768pxd-md-none
视口大于或等于 768px仅当视口大小在的帮助下出现另一个元素。<span class="btn btn-danger btn-lg d-none d-md-inline">BTN</span>>=768pxd-none d-md-inline

工作示例可以在这里看到。调整浏览器宽度以查看结果。

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

方法 1 - 有 2 个按钮;

拥有两个不同的按钮并根据设备宽度显示它们并不是响应式设计的最有效或最佳实践。它可能会导致将来的维护问题，并使您的代码变得复杂。

但是，这是解决问题的最简单方法。除此之外，对于进一步的设计请求，您将有两个不同的按钮来进行这些更改。（示例：）。您只需将和类添加到您的按钮中即可。font-sizefs-4fs-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>

因此，这两种方法都是正确的，它们之间的选择需要权衡，应由您根据自己的情况决定。

隐藏其中一个按钮，是个好方法吗？[关闭]

Hiding one of the button, is it a good method? [closed]

评论

评论

方法 1 - 有 2 个按钮;

方法 2 - 带有 CSS 的按钮;

评论