J'essaie d'utiliser la classe de carte bootstrap 4 avec le code HTML et la sortie suivants. Cependant, je veux que le texte en h5 soit à côté du "Titre" pour qu'il ne soit qu'une seule ligne. J'aimerais également que le bouton apparaisse en haut à droite en ligne avec le titre. Je suis un peu nouveau dans le style, donc j'ai toujours du mal à savoir quand les choses seront en ligne ou en ligne.

Output

<div class="card">
    <div class="card-block">
        <h4 class="card-title">Title</h4>
        <h5>-  smaller that should be beside main title</h5>
        <button class="card-title btn btn-primary pull-right">Button</button>
        <p class="card-text">Entry 1</p>
        <p class="card-text">Entry 2</p>
        <p class="card-text">Entry 3</p>
        <p class="card-text">Entry 4</p>
    </div>
</div>
1
user172902 27 janv. 2017 à 07:59

4 réponses

Meilleure réponse

Vous pouvez utiliser la classe d-inline pour les afficher sous forme d'éléments en ligne

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
  <div class="card-block">
    <h4 class="card-title d-inline">Title</h4>
    <h5 class="d-inline">- smaller that should be beside main title</h5>
    <button class="card-title btn btn-primary pull-right">Button</button>
    <p class="card-text">Entry 1</p>
    <p class="card-text">Entry 2</p>
    <p class="card-text">Entry 3</p>
    <p class="card-text">Entry 4</p>
  </div>
</div>
4
Michael Coker 27 janv. 2017 à 05:26

Vous pouvez simplement résoudre ce problème avec inline-block

.card-title , h5{
   display:inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="card">
    <div class="card-block">
        <h4 class="card-title">Title</h4>
        <h5>-  smaller that should be beside main title</h5>
        <button class="card-title btn btn-primary">Button</button>
        <p class="card-text">Entry 1</p>
        <p class="card-text">Entry 2</p>
        <p class="card-text">Entry 3</p>
        <p class="card-text">Entry 4</p>
    </div>
</div>
1
Jishnu V S 27 janv. 2017 à 05:32

Voici comment y parvenir. EXEMPLE DE TRAVAIL ICI

<div class="card">
    <div class="card-block">
      <div class="row">
        <div class="col-xs-4">
          <h4 class="card-title">Title</h4>
        </div>
        <div class="col-xs-4">
          <h5>-  smaller that should be beside main title</h5>
        </div>
        <div class="col-xs-4">
           <button class="card-title btn btn-primary pull-right">Button</button>
        </div>
      </div>
        <p class="card-text">Entry 1</p>
        <p class="card-text">Entry 2</p>
        <p class="card-text">Entry 3</p>
        <p class="card-text">Entry 4</p>
    </div>
</div>
1
Josh Malan 27 janv. 2017 à 05:06

Essayez ceci en utilisant la classe put pull-left

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
    <div class="card-block">
        <h4 class="card-title pull-left">Title</h4>
        <h5 class=" pull-left">-  smaller that should be beside main title</h5>
        <button class="card-title btn btn-primary pull-right">Button</button>
        <div class="clearfix"></div>
        <p class="card-text">Entry 1</p>
        <p class="card-text">Entry 2</p>
        <p class="card-text">Entry 3</p>
        <p class="card-text">Entry 4</p>
    </div>
</div>

Ou vous pouvez le faire avec display:inline-block

.card .card-title,.card h5{ 
  display:inline-block;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
    <div class="card-block">
        <h4 class="card-title">Title</h4>
        <h5>-  smaller that should be beside main title</h5>
        <button class="card-title btn btn-primary pull-right">Button</button>       
        <p class="card-text">Entry 1</p>
        <p class="card-text">Entry 2</p>
        <p class="card-text">Entry 3</p>
        <p class="card-text">Entry 4</p>
    </div>
</div>
1
Minal Chauhan 27 janv. 2017 à 05:05