ブートストラップカードの画像の横にテキストを追加するにはどうすればよいですか？

Question

ブートストラップカードの画像の横にテキストを挿入しようとしています。しかし、テキストは次の行に終わる。以下は、イメージのサイズを約半分の幅に合わせるために使用したCSSで、テキストは他の半分に入ると仮定しています。テキストを画像の右側に浮かせるには、どのようなCSSを追加できますか？

.card-img-top { 
      height:150px; 
      width:150px; 
     } 

Answer 1

あなたはこの場合にもflexbox utility classesを使用することができます。
画像とテキストを垂直方向に中央に配置するために、.d-flex .align-items-centerを使用する例を以下に示します。あなたの実際の実装はあなたの正確なニーズに応じて変わるかもしれませんが、これは単に始める方法を説明するためのものです。

<div class="card w-50"> 
 
    <div class="card-img-top d-flex align-items-center bg-light"> 
 
     <div> 
 
      <img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image" alt="Card image cap"> 
 
     </div> 
 
     <p class="col p-2 m-0">Text next to the right of the image</p> 
 
    </div> 
 

 
    <div class="card-body"> 
 
     <h5 class="card-title">Card title</h5> 
 
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
 
    </div> 
 
</div> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

Answer 2

のhtmlでこれを試してみてください：

<figure> 
    <img .... > 
</figure> 
<h3> Text.... </h3> 
<p> Text.... </p>