小编Ada*_*hes的帖子

所以我使用Enquire.js为我的网站添加和删除bootstrap的预定义css类.这是我有的:

一些引导HTML缩略图:

<div class="row">
  <div class="thumb thumb col-xs-12 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." class="img-rounded img-responsive" alt="...">
    </a>
  </div>
  <div id ="thumb" class="thumb col-xs-12 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." class="img-rounded img-responsive" alt="...">
    </a>
  </div>
</div>

我已经设置了enquire.js,以便缩略图大小根据屏幕大小调整大小:

<script type="text/javascript">

var $info = $('.thumb');

    enquire.register("(max-width: 480px)", {

    match: function() {      
        $info.removeClass('col-xs-6');
        $info.addClass('col-xs-12');
    },


    unmatch: function() {
         $info.removeClass('col-xs-12');
         $info.addClass('col-xs-6');      
    }

    }).listen();

</script> 

问题:

我遇到的问题是,只要屏幕尺寸减小到480px或更低,enquire.js代码就会启动.

因此,当首次加载网站时,调整大小代码将无法工作,直到我实际手动将其调整为480px或更低,然后您可以看到调整大小发生.

您可以在这里查看该网站

我正在考虑使用a label来包装a h3和ptag.在我看来,这是有道理的,因为标签有标题和描述,都与输入有关.但是我似乎无法在规范中找到关于是否可以这样做的任何信息.

这是一个例子:

<label for="test1">
    <h3>Label Heading</h3>
    <p>Label Description</p>
</label>

<input id="test1" name="test" type="radio"/>

如果没有人有更好的建议吗？