Q&A
前提・実現したいこと
bootstrapのcard機能を使い下記のように右端に移動したいいのですが、どのようなコードを入力すれば良いでしょうか。
発生している問題・エラーメッセージ
画面の左上から移動させることができない状況です。
該当のソースコード
<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" href="./style.css"> <title>Airbnbで、お家、アパート、お部屋をシェアしよう</title> </head> <body> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">概要</a> </li> <li class="nav-item"> <a class="nav-link" href="#">準備</a> </li> <li class="nav-item"> <a class="nav-link" href="#">安全</a> </li> <li class="nav-item"> <a class="nav-link" href="#">マネープラン</a> </li> </ul> <div style="position: relative; display:inline-block;"> <img src="8.1.jpg" class="img-fluid" alt="背景" width="1280" height="467"> <div style="position: absolute; top: 0; left: 0; max-width: 200%; max-height: 100%; padding: 100px; text-align left;"> <h1></h1> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h5 class="card-title">Airbnbホストになって、暮らしをレベルアップ</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> ```ここに言語名を入力 ソースコード ```試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
手早く済ますなら以下、かと思います。
HTML
1<div class="col-12 d-flex"> 2 <div class="card ml-auto">
(自分ならposition: absolute;などで実装しますが、その場合そもそもrowやcolを使用しないので、最終的には違う形になるかもしれませんが)
投稿2020/06/23 12:17
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/24 07:52