内容隐藏在响应式网格 bootstrap-vue 中答案

【问题标题】：Content get hidden in responsive grid bootstrap-vue内容隐藏在响应式网格 bootstrap-vue 中
【发布时间】：2020-10-28 07:43:49
【问题描述】：

我正在使用 bootstrap-vue 开发一个 vue 应用程序。我的模板和样式是这样的，

<template>
  <div>
    <b-container class="p-0 mt-3" fluid>
      <b-row style="height:110px">
        <b-col cols="4" sm="4" md="4" lg="2" xl="2" style="background-color:white">
          <div style="border-right:solid; border-color:#576367" class="p-2 mt-2">
            <b-row  class="mt-3">
              <p style="font-size:16px;color:#01151C; font-weight:bold;margin: 0px;">{{meeting.meetingTime | moment("MMMM Do") }}</p>
            </b-row>
            <b-row>
              <p style="font-size: 14px;">{{meeting.meetingTime | moment("h:mm a") }}</p>
            </b-row>
          </div>
        </b-col>
        <b-col cols="8" sm="8" md="6" lg="4" xl="3" style="background-color:white" class="p-2">
          <div class="p-2 mt-1">
            <div class="left-align" :style="{backgroundColor: getColor()}" style="width:60px;height:57px;color:white; border-radius: 7px;">
              <p style="position: absolute;top: 15px; left: 17px;">{{getInitials(meeting.partnerName)}}</p>
            </div>
            <p class="left-align ml-2 mt-2" style="font-size:16px;color:#01151C; font-weight:bold; margin:0px">{{meeting.partnerName}}</p>
            <p class="left-align ml-2">
              <b-icon icon="envelope" aria-hidden="true"></b-icon>  {{meeting.partnerEmail}}
            </p>
          </div>
        </b-col>
        <b-col cols="6" sm="6" md="5" lg="2" xl="2" style="background-color:white" class="p-2">
          <p class="ml-2 mt-4 mb-0">{{meeting.meetingParticipants}}</p>
          <p class="ml-2">Participants</p>
        </b-col>
        <b-col cols="6" sm="6" md="5" lg="3" xl="2" style="background-color:white" class="p-2">
          <b-button variant="outline-primary" class="mt-4">Start Meeting</b-button>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template> 
<style scoped>
  .left-align {
    position: relative;
    float: left
  }
</style>

对于xl 和lg 断点，它工作正常。但是在到达md 断点后，内容开始被上面的内容隐藏。 .

按钮和参与者数量被隐藏。但是，如果我使用 chrome 开发工具将边距顶部添加到行中，它看起来很好。我尝试添加媒体查询，但我发现 xs 断点没有媒体查询。我对响应式开发非常陌生，找不到任何资源来解决我的问题。

【问题讨论】：

请发布一个可行的环境以在代码和框中重现您的问题

标签： html css vue.js bootstrap-vue

【解决方案1】：

我可以看到您的md 超过了 12 的计数。在响应式设计中，屏幕将分成 12 列。所以你必须在 12 列之间定义元素。

举例

您的 4 个 b-col 元素中的每个元素将有 md-3，加起来是 12。

您必须将元素拆分为 12 列才能在屏幕上显示。所以只有你在屏幕上看不到。

附：这同样适用于其他断点。

【讨论】：

【解决方案2】：

我在行中添加了<b-row style="height:110px"> 高度，弄得一团糟

【讨论】：