web-dev-qa-db-ja.com

テキストをBootstrap 4

私は現在bootstrap 4.を使用しています。カードのヘッダーにテキストを揃えようとしています。ml-autoが機能しませんでした。解決策は何でしょうか？

See the red area

これが私のカードヘッダーコードです。

<div class="card-header bg-info text-white">
  <a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
  <a href="#" class="text-white ml-auto">Add Media</a>
</div>
htmlcssbootstrap-4twitter-bootstrap-4
5
Root Haxx

ml-autoクラスを機能させるには、次のようにd-flexクラス（display：flex）を親要素に追加するだけです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card-header bg-info text-white d-flex">
    <a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
    <a href="#" class="text-white ml-auto">Add Media</a>
</div>
4
WebDevBooster

Bootstrapのバージョンによって異なります

ブートストラップ3

クラスを使用するtext-right

ブートストラップ4

最新バージョンでは、クラスtext-lg-rightを使用できます。もちろん、好みのビューポートサイズを使用できます。

付属品

この質問 で詳細を確認するか、 公式ドキュメントv4 を確認してください

4
dstrants

ブートストラップは使用しません。マテリアライズを使用しますが、通常のスタイルを追加できます。

 <a href="#" class="text-white" style="text-align: right;"><i class="fa-th"></i> Media Library</a>

これはアンカータグだけを右に揃えます

1
Dustbin Saves you

このクラスを使用text-right ..

<div class="card-header bg-info text-white text-right">
   <a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
</div>
0
Sarvan Kumar

このコードを使って...

<div class="card-header bg-info text-white" style="text-align:right">
       <a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
 </div>
0
vidarshana