Bootstrap карт - текст, выходящий из карт - PullRequest
Новая
       10

Bootstrap карт - текст, выходящий из карт

1 голос
/ 05 февраля 2020

Я разработал 4 bootstrap карты в 4 разных колонках. Внутри каждой из этих карточек я создал новую карточку, содержащую информацию определенного типа.

Моя проблема заключается в том, что текст выходит из карточки, когда я уменьшаю размер экрана (адаптивный тест). В чем моя проблема и как я могу ее решить?

Спасибо!

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

Ответы [ 2 ]

1 голос
/ 05 февраля 2020

Первый - текст выходит из карты, потому что width карты автоматический и не соответствует ее содержимому, которое шире.

Второй - Трудно понять, чего ты хочешь достичь. Но вы можете придерживаться этой стратегии:

  • удалить все жестко закодированные style="overflow-y: auto;" из divs с классом card-body
  • , добавить overflow: auto; в .myCards в css
  • добавить 
.myCards > .card-body {
  min-width: fit-content;
}

Результат посмотреть в фрагменте в полноэкранном режиме и изменить размер экрана 

.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%;
  overflow: auto;
}

.myCards > .card-body {
  min-width: fit-content;
}

.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">
        <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">
        <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">
        <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">
        <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>

ОБНОВЛЕНИЕ

Когда вы хотите отзывчивость, вы должны решить, что вы имеете в виду, что это такое для вас.

Теперь я вижу, что ваша структура html довольно грязная, и предлагаю посмотреть. Например, вложенные bootstrap карты не лучшая идея. И таких сомнительных мест очень много.

Быстрое исправление, я бы сказал, хак, просто чтобы посмотреть, как это может выглядеть:

  • remove overflow: auto; от css класс myCards
  • добавьте min-width: auto !important; к css класс myCards
  • и можете также удалить 
.myCards > .card-body {
  min-width: fit-content;
}

Проверьте фрагмент ниже, но посмотрите на свою структуру. 

.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%;
  min-width: auto !important;
}

.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">
        <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">
        <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">
        <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">
        <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>
0 голосов
/ 05 февраля 2020

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

...