时间戳

首页 > 解决方案 > 内容隐藏在响应式网格 bootstrap-vue 中

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

问题描述

我正在使用 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>

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

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

标签： htmlcssvue.jsbootstrap-vue

解决方案

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

推荐阅读