个人中心
gpt4 book ai didi

html - Bootstrap 卡片 - 卡片中的文字

转载 作者：行者123 更新时间：2023-12-04 10:38:12 26 4
gpt4 key购买 nike

我在 4 个不同的列中开发了 4 个 Bootstrap 卡。在每张卡片中，我创建了一张包含某种类型信息的新卡片。

我的问题是，当我缩小屏幕尺寸(响应测试)时，文本会从卡片中溢出。我的问题是什么，我该如何解决？

谢谢!

DEMO 

.cardsZone {
  margin-top: 2%;
  width: 80%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
}

.myCards {
  background: #E7EAF180 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 20px #BCBCCB47;
  border-radius: 8px;
  border: none;
  height: 100%;
}

.card-deck .card {
  margin-left: 0px;
}

.mysmallCcards {
  width: 100%;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 20px #BCBCCB47;
  border-radius: 8px;
  border: none;
  margin-top: 20px;
}

.card-header:first-child {
  border-radius: calc(9px - 1px) calc(9px - 1px) 0 0;
}

.mycardHeader {
  background-color: white;
  padding: 8px;
}

.imgDash {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.brandName {
  text-align: left;
  font-family: 'Noto Sans', sans-serif;
  font-size: 22px;
  letter-spacing: 0;
  color: #4D4F5C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 0px;
}

.subtitledash {
  text-align: left;
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
  font-weight: bold;
  ;
  letter-spacing: 0;
  color: #4D4F5C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 28px;
}

.imgusersDash {
  width: 24px;
  height: 24px;
  transform: matrix(1, 0, 0, 1, 0, 0);
  border-radius: 8px;
}

.usrDash {
  margin-top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  line-height: 24px;
  text-align: center;
  background: #4981C226;
  font-size: 13px;
  font-family: 'Noto Sans', sans-serif;
  letter-spacing: 0;
  color: #4981C2;
}

.p1 {
  background: #EFF0F2 0% 0% no-repeat padding-box;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'Noto Sans', sans-serif;
  letter-spacing: 0;
  color: #BCBCCB;
  padding: 3px 7px 3px 8px;
  text-align: center;
}

.duracaoDash {
  background: #D9DAE2 0% 0% no-repeat padding-box;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'Noto Sans', sans-serif;
  color: #BCBCCB;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 8px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="six" style="height: 75%;">
  <div class="card-deck cardsZone">
    <div class="card myCards">
      <div class="card-body" style="overflow-y: auto; overflow-x:hidden;">
        <div>
          <div class="card mysmallCcards">
            <div class="card-header mycardHeader">
              <div class="d-flex">
                <div class="p-2">
                  <img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgDash">
                </div>
                <div class="p-2">
                  <span class="brandName card-title card-text">Settings in the world</span>
                  <p class="subtitledash card-subtitle card-text">Test Settings</p>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="d-flex">
                <div class="p-2">
                  <img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgusersDash">
                </div>
              </div>
              <div class="d-flex">
                <div class="p-2">
                  <span class="p1">1</span>
                </div>
                <div class="p-2">Flex item</div>
                <div class="ml-auto p-2"> <span class="duracaoDash">00:00:00</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card myCards">
      <div class="card-body" style="overflow-y: auto;">
        <div>
          <div class="card mysmallCcards">
            <div class="card-header mycardHeader">
              <div class="d-flex">
                <div class="p-2">
                  <img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgDash">
                </div>
                <div class="p-2">
                  <span class="brandName card-title card-text">Settings in the world</span>
                  <p class="subtitledash card-subtitle card-text">Test Settings</p>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="d-flex">
                <div class="p-2">
                  <img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgusersDash">
                </div>
              </div>
              <div class="d-flex">
                <div class="p-2">
                  <span class="p1">1</span>
                </div>
                <div class="p-2">Flex item</div>
                <div class="ml-auto p-2"> <span class="duracaoDash">00:00:00</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card myCards">
      <div class="card-body" style="overflow-y: auto;">
        <div>
          <div class="card mysmallCcards">
            <div class="card-header mycardHeader">
              <div class="d-flex">
                <div class="p-2">
                  <img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgDash">
                </div>
                <div class="p-2">
                  <span class="brandName card-title card-text">Settings in the world</span>
                  <p class="subtitledash card-subtitle card-text">Test Settings</p>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="d-flex">
                <div class="p-2">
                  <img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgusersDash">
                </div>
              </div>
              <div class="d-flex">
                <div class="p-2">
                  <span class="p1">1</span>
                </div>
                <div class="p-2">Flex item</div>
                <div class="ml-auto p-2"> <span class="duracaoDash">00:00:00</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card myCards">
      <div class="card-body" style="overflow-y: auto;">
        <div>
          <div class="card mysmallCcards">
            <div class="card-header mycardHeader">
              <div class="d-flex">
                <div class="p-2">
                  <img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgDash">
                </div>
                <div class="p-2">
                  <span class="brandName card-title card-text">Settings in the world</span>
                  <p class="subtitledash card-subtitle card-text">Test Settings</p>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="d-flex">
                <div class="p-2">
                  <img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgusersDash">
                </div>
              </div>
              <div class="d-flex">
                <div class="p-2">
                  <span class="p1">1</span>
                </div>
                <div class="p-2">Flex item</div>
                <div class="ml-auto p-2"> <span class="duracaoDash">00:00:00</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

问题

Image

最佳答案

1) 要实现以下类型的包装，请移动您的 style="overflow-y: auto;"来自 class="card-body"至 class="card mysmallCcards"

c

2) 如果您更喜欢下面这种包装方式，请更改 <span class="brandName card-title card-text">Settings in the world</span>来自span标记为 p标记并更改以下内容:

.mysmallCcards{
 width: 100%;
 background: #FFFFFF 0% 0% no-repeat padding-box;
 box-shadow: 0px 3px 20px #BCBCCB47;
 border-radius: 8px;
 border: none;
 margin-top: 20px;

 overflow-y: auto;
 /*overflow-x: hidden;*/
}

.brandName{
 text-align: left;
 font-family: 'Noto Sans', sans-serif;
 font-size: 22px;
 letter-spacing: 0;
 color: #4D4F5C;
 /*white-space: nowrap; 
 overflow: hidden; 
 text-overflow: ellipsis;
 line-height: 0px;*/
}

enter image description here

关于html - Bootstrap 卡片 - 卡片中的文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60065991/

26 4 0
文章推荐： sql - AWS Athena 从选择查询创建表
文章推荐： f# - 如何在 F# 中以自己定义的类型正确访问元素
文章推荐： amazon-web-services - 如何引用 `AWS::CodeDeploy::DeploymentGroup::LoadBalancerInfo?`
文章推荐： Tensorflow2.0 MultiWorkerMirroredStrategy 示例挂起
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com