html - 使用响应式设计时，是否可以将单独div中包含的两个不同小部件的显示属性设置为不同的值？

Question

因此，我已将两个Google Translate窗口小部件导入到我的网站中，它们位于不同的位置，包含在不同的div中。

我想让其中一个在窗口大小为lg时可见（我正在使用引导程序），所以我给它提供了一个d-lg-block和d-none的类值，以便它消失并且在不占用空间的情况下窗口缩小。

在另一个div中，我只是有一个Google翻译元素，其ID名称不同，由于某些原因，它会受到第一个小部件的类值的影响（当窗口大时，它也会出现；当窗口缩小时，它也会消失）。我试图将第二个窗口小部件/谷歌翻译元素的类设置为等于d-block和d-lg-none，但是它不起作用。

    <div class="col-2 d-none d-lg-block" style="position: relative; 
        top: 21px; right: 20px;" id="google_translate_element">
    </div>
    <div class="col-2 d-block d-lg-none" id="google_translate_element2">
    </div>

有什么方法可以使一个显示类不影响另一个？

Answer 1

这将为您工作。

    <div class="col-2 hidden-md-down" style="position: relative; 
        top: 21px; right: 20px;" id="google_translate_element">
  testetete
    </div>
    <div class="col-2 hidden-lg-up" id="google_translate_element2">
      tetsetetetetetet
    </div>