Dev Faq
0
votes

Bootstrap 4 - Texte Aligner dans la disposition de la carte

J'ai la mise en page suivante qui crée "Âge: 36" définie dans la ligne d'une ligne,

p> 

<table style="width:100%">
    <tr>
        <td style="width:50%">Age</td>
        <td style="width:50%">36</td>
    </tr>
</table>

1 commentaires

Vous pouvez utiliser la propriété CSS Affichage: flex

5 Réponses :

0
votes

Je pense que si j'étais vous, je choisirais de placer les classes Col-MD-6 sur les champs appropriés. Cela devrait répondre au besoin. xxx

0 commentaires
2
votes

La solution la plus simple consiste à utiliser une ligne avec 2 colonnes xxx

https://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns

Une autre solution pourrait utiliser Flex. L'inconvénient est que vous devez donner manuellement vos 2 «colonnes» un rembourrage ou une marge ». xxx

https://getbootstrap.com/docs/4.1/utilities/flex/

2 commentaires

Est-il correct d'utiliser la classe de ligne à l'intérieur du corps de la carte?

Il n'y a pas d'argument documenté contre l'utilisation du corps de carte à l'intérieur. Suivi de la grille de formulaire Documentation Vous pouvez également utiliser la fonctionnalité de la grille sous une forme. Alors pourquoi ne pas l'utiliser dans des cartes

0
votes

Voir cet exemple

p> 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">
      <h5 class="card-title header_big text-capitalize"> example's Profile</h5>
      <p class="card-text card-text-custom">
          <span> Age:</span> <span class="font-weight-bold">36</span>
      </p>
  </div>
  <div class="card-footer">Footer</div>
</div>

0 commentaires
0
votes

Je pense que vous recherchez cette solution: 

<div class="container">
    <div class="row">
        <div class="col">Age</div>
        <div class="col">36</div>
    </div>
</div>

0 commentaires
0
votes

Alternativement, vous pouvez utiliser la version de la bibliothèque-agnostic flexbox.

html: xxx

CSS: xxx < / p>

0 commentaires

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher
Changer la direction de défilement de la page Web sur la version mobile
Target first-child css styled-components