Question

<button id='123'  type="button" class="btn btn-xs btn-danger">
<i class="fa fa-trash"></i>
</button>


@media only screen and (min-width: 600px) { .... }

我希望最小宽度：600px，更改按钮ID =＆＃39; 123＆＃39; class =＆＃34; btn btn-lg btn-danger＆＃34;

请帮助我！

Answer 1

您无法使用CSS更改元素的类列表。但是，您可以使用mediaqueries更改css类的定义。

如果要更改元素上的一个或多个类，可以像这样使用jQuery：

$(window).on('resize', function() {
  var win = $(this);
  if (win.width() > 600) {

    $('#123').addClass('btn-lg');

  } else {
    $('#123').removeClass('btn-lg');
  }
});

Answer 2

您无法使用媒体查询更改元素的类。但您可以在两个不同的按钮之间切换：

<button type="button" class="btn btn-xs btn-danger visible-xs-block">
   <i class="fa fa-trash"></i>
</button>
<button type="button" class="btn someOtherClass hidden-xs">
   <i class="fa fa-trash"></i>
</button>

实现这一点，有预定义的bootstrap助手类，可以显示/隐藏依赖于屏幕大小的元素。在您的情况下， visible-xs 将仅在小屏幕上显示该元素，而 hidden-xs 将在更大的屏幕上隐藏该元素。

如何在媒体查询中更改元素类

2 个答案: