使用Bootstrap：当对象是visible-xs visible-sm时如何添加类？

h7appiyu 于 2023-03-16 发布在 Bootstrap

关注(0)|答案(4)|浏览(133)

我一直试图找到这个问题的解决方案。我一直无法在网上找到任何答案。不幸的是我的javascript技能不是太好。我了解如何做到这一点的基本概念，我唯一的问题是如何调用输入，只有当它在可见模式。

<div class="col-sm-6 visible-xs visible-sm">
       <label for="date">Desired Date:</label>
       <input name="date" type="date" id="mobiledateinput">
</div>

我知道这需要用javascript来解决。这里是我所能得到的最接近的

$(document).ready(function(){
                $("mobiledateinput, visible-xs").each( function () {
                $(this).addClass('validate-required');
            });
        });

twitter-bootstrap

来源：https://stackoverflow.com/questions/42599476/using-bootstrap-how-to-add-a-class-when-object-is-visible-xs-visible-sm

4条答案

按热度按时间

yks3o0rb1#

您可以使用媒体查询，这是一种CSS技术。
例如：

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

我的意思是你可以改变阶级比例。
visible-xs断点为（最大宽度：768 px）。你可以在bootstrap网站上找到所有的断点。

赞(0）回复(0）举报 2023-03-16

r7knjye22#

您的选择器应该是

$(".mobiledateinput, .visible-xs")

如果前面没有句点，jQuery就不知道您引用的是CSS类。

赞(0）回复(0）举报 2023-03-16

vvppvyoh3#

visible-sm类，它通过 Bootstrap 添加，并且当它可见时将执行操作，因此无需关注[ visible-xs visible-sm ]，只需关注输入事件，以便通过#mobiledateinput将类validate-required添加到所有输入，它将是....

$(document).ready(function(){
            $("#mobiledateinput").each( function () {
                 var $this  = $(this) //to cash this object in the var $this
                 $this.addClass('validate-required');
        });

  });

我建议使用class .mobiledateinput而不是ID，因为ID必须用于页面中的一个元素。

赞(0）回复(0）举报 2023-03-16

zbdgwd5y4#

您可以设置一个类medium-css并像这样定义css

/* only use this class for screens >= md */
@media (min-width: 768px) {
    /* your Styles */
    .medium-css{
        display: none;
    }
}

或者由于您使用的是 Bootstrap d-none将帮助您

<div class="d-none d-md-block">
  This element is hidden on small screens, but displayed on md screens and larger.
</div>

赞(0）回复(0）举报 2023-03-16

我来回答

使用Bootstrap：当对象是visible-xs visible-sm时如何添加类？

4条答案

相关问题

热门标签

最新问答