0

我正在使用标准卡来显示数据信息。在我的卡片中，我divs嵌套在我的父 div 中，以创建我想要的所需外观。我的卡无法扩展以显示所有数据时遇到问题。我卡片的剩余一半被遗漏了，并在卡片外显示文字。我已经尝试调整 css 规则 / 并摆脱一些嵌套的 div，但即使divs在父 div 内没有任何 & 文本，它的形状仍然相同。我的 css 中没有任何最大高度/宽度限制。因此，我不确定是什么导致卡片被裁剪掉。

profile-card是生成卡片背景颜色的代码。

我还删除了我最初在卡片上的填充，认为这可能是一个原因，但它没有影响。我在这个线程的底部包含了图像。

这是我的代码：

 <div class="col-sm-4">
          <div class="profile-card">
                     <div>
                     <h3>$2.7tn</h3>
                         </div>
                           <div>                            
                             <h4>GROSS STATE PRODUCT</h4>
                                </div>
                               <div class="col-md-6"> 
                                <p> 
                                    Growth Rate 2013-18
                                </p>
                                </div>
                                <div>
                                    <p>State Growth Rank</p>
                                </div>                                
                              <div class="col-md-12">
                                  <div class="col-md-6"> 
                                      <p> +0.8% </p>
                                  </div>
                                  <div class="col-md-6"> 
                                      <p>1</p>
                                  </div>
                              </div>
                        </div>
                        </div>

CSS：

.profile-card {
    background: #2A365B;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
    border-radius: 3px;
}

.profile-card h3 {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 36px!important;
    line-height: 40px;
    /* or 111% */
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    border-radius: 6px;
}

.profile-card h4 {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    /* or 129% */
    display: flex;
    align-items: center;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.profile-card p {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 18px;
    /* identical to box height, or 129% */
    letter-spacing: 0.5px;
    color: #FFFFFF;
}
4

2 回答 2

1

<div class="row">我可以通过在 div 保存卡片内容之前添加一个来解决我的问题

于 2020-04-29T19:28:10.763 回答
0

只需复制您的代码，您的错误就无法重现。它可能依赖于更多在后台运行的 CSS。

可能与溢出属性有关吗？

也许尝试类似的东西

.profile-card {
     overflow: visible;
}
于 2020-04-27T22:42:11.953 回答