2 votes

mvp Sets avatar

Cartes Bootstrap - texte sortant des cartes

Demandé el 4 de Février, 2020
Quand la question a-t-elle été
3308 affichage
Nombre de visites la question a
2 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai développé 4 cartes bootstrap dans 4 colonnes différentes. Dans chacune de ces cartes, j'ai créé une nouvelle carte qui contient un certain type d'information.

Mon problème est que le texte sort de la carte lorsque je réduis la taille de l'écran (test responsive). Quel est mon problème et comment puis-je le résoudre ?

Gracias.

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>

Problème

Image

Demandé el 4 de Février, 2020 par mvp Sets

Réponses

Trop de publicités?

1voto

Dylan Anlezark avatar
Dylan Anlezark Points 203

1) Pour réaliser le type d'emballage ci-dessous, déplacez votre style="overflow-y: auto;" de class="card-body" a class="card mysmallCcards"

c

2) Si vous préférez le dessous de ce type d'emballage, alors changez <span class="brandName card-title card-text">Settings in the world</span> d'un span à une balise p et modifiez ce qui suit :

.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

Répondu el 4 de Février, 2020 par Dylan Anlezark (203 Points )

1voto

Aleksandr Belugin avatar
Aleksandr Belugin Points 1871

Premier - le texte sort de la carte, parce que la carte width est automatique et ne correspond pas à son contenu, qui est plus large.

Deuxièmement - Il est difficile de comprendre ce que vous voulez réaliser. Mais vous pouvez vous en tenir à cette stratégie :

  • supprimer tous les codes durs style="overflow-y: auto;" de divs avec la classe card-body
  • ajouter overflow: auto; a .myCards sur css

  • ajouter

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

Le résultat est visible dans le snippet en mode plein écran et en changeant la taille de l'écran.

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

UPDATE

Lorsque vous voulez une réactivité, vous devez décider ce que vous voulez dire, ce que c'est pour vous.

Maintenant je vois, que votre html La structure est assez désordonnée et je vous suggère de l'examiner. Par exemple, les cartes bootstrap imbriquées ne sont pas la meilleure idée. Et ces endroits sont très discutables.

Une réparation rapide, je dirais même un hack, juste pour voir à quoi cela peut ressembler :

  • remove overflow : auto ; de css classe myCards
  • ajouter min-width: auto !important; a css classe myCards

  • et peut aussi enlever

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

Vérifiez l'extrait ci-dessous, mais regardez votre structure.

.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>
Répondu el 4 de Février, 2020 par Aleksandr Belugin (1871 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X