Текст выходит из карты и накладывается на изображение - PullRequest
Новая
       2

Текст выходит из карты и накладывается на изображение

0 голосов
/ 04 февраля 2020

Я разработал bootstrap карту, внутри этой bootstrap карты я помещаю другую.

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

Демо

код 

  <div class="card-deck cardsZone">
        <div class="card myCards">
          <div class="card-body">
            <div *ngFor="let pr of ProgressDashTasks">
            <div class="card mysmallCcards">
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-2">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgDash">
                  </div>
                  <div class="col-sm-8">
                    <span class="brandName">MY PERCENTAGE</span>
                    <p class="subtitledash">New percentage</p>
                  </div>
                </div>
                <hr class="solid">
                <div class="row">
                  <div class="col-xs-6">
                      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
                  </div>
                  <div class="col-xs-6">
                      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
                  </div>
                  <div class="col-xs-6">
                      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
                  </div>
                </div>
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
              </div>
            </div>
            </div>
          </div>
        </div>
      </div>

Проблема изображения

enter image description here

1 Ответ

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

На .cardsZone вы должны использовать относительную ширину, а не абсолютную. Используйте width: fit-content: 

  .cardsZone{
    margin-top: 5%;
    width: fit-content;
    height: 70%;
    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;
  }

.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;
}

.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;
font-weight: re;
}

.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;
}

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


hr.solid {
  border-top: 1px solid #999;
  width:100%
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="card-deck cardsZone">
  <div class="card myCards">
    <div class="card-body">
      <div *ngFor="let pr of ProgressDashTasks">
        <div class="card mysmallCcards">
          <div class="card-body">
            <div class="row">
              <div class="col-sm-2">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgDash">
              </div>
              <div class="col-sm-8">
                <span class="brandName">MY PERCENTAGE</span>
                <p class="subtitledash">New percentage</p>
              </div>
            </div>
            <hr class="solid">
            <div class="row">
              <div class="col-xs-6">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
              </div>
              <div class="col-xs-6">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
              </div>
              <div class="col-xs-6">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
              </div>
            </div>
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
...