Question

对于按钮，默认情况下在xs，sm，md，lg，xl之间使用Bootstrap 4 allow you to set default button "size"。

因此，在我的代码中，首先是小屏幕，我对屏幕<576px使用sm大小：

<button type="button" class="btn btn-success btn-sm"></button>

但是对于≥1200px的xl屏幕，是否需要我通过Bootstrap更改size属性或其他设置来调整按钮大小？

我不太了解小屏幕和大屏幕之间按钮和'size'属性的Bootstrap响应行为。

谢谢。

Answer 1

我认为Bootstrap中的响应式按钮没有开箱即用的功能，最好在sass / media查询中扩展现有的Bootstrap按钮的大小，即

.responsive-button {
  @media (min-width: 576px) { @extend .btn-sm }
  @media (min-width: 768px) { @extend .btn-md }
}

我尚未对此进行测试，因此可能需要进一步研究，但希望这能使您步入正轨：）

Answer 2

根据Vue.js文档，我终于根据window.onresize函数中的mounted ()事件调用动态地计算了我的CSS类。

示例：

这是我的Bootstrap按钮：

<b-button :size="nsize" variant="outline-success" class="my-2 my-sm-0">
     <font-awesome-icon icon="search"/>
</b-button>

这是我在App.vue文件中的功能：

<script>
export default {
  name: 'topnavbar',
  data () {
    return {      
      nsize: "sm",
      mediaWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
    }
  },
  mounted () {    
    if (window.addEventListener) {
      window.addEventListener("resize", this.updateSize, false);
    } else if (window.attachEvent) {
        window.attachEvent("onresize", this.updateSize);
    }
  },
  methods : {
    updateSize: function (){    
      let sizeEl = "md";  
      let width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
      if(width <= 576){
        sizeEl = "sm";
      }
      this.nsize = sizeEl;      
    }
  }
}
</script>

来源：

根据屏幕尺寸调整按钮

2 个答案: