レイアウトのチュートリアルやサンプルコードがある場合、それぞれの下にテキストが並んでいる3つの円が並んでいるのが不思議です。また、それは反応的なので、それは1つの円だけ、その次のもののようにテキストが続きます。 ありがとう3列の円と応答可能
-1
A
答えて
2
ブートストラップに精通している場合は、このようなことを試すことができます。
<div class="row">
<div class="col-sm-4">
<div class="circle"></div>
<span>This is a text</span>
</div>
<div class="col-sm-4">
<div class="circle"></div>
<span>This is a text</span>
</div>
<div class="col-sm-4">
<div class="circle"></div>
<span>This is a text</span>
</div>
</div>
<style type="text/css">
.circle{
position: relative;
border-radius: 50%;
width: 100%;
height: auto;
padding-top: 100%;
background: black;
}
</style>
1
おそらく、ブートストラップライブラリを調べる必要があります。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-4">
<img src="yourcirclepicture.png" alt="circle">
</div>
<div class="text">
your text
</div>
<div class="col-md-4">
<img src="yourcirclepicture.png" alt="circle">
</div>
<div class="text">
your text
</div>
<div class="col-md-4">
<img src="yourcirclepicture.png" alt="circle">
</div>
<div class="text">
your text
</div>
</div>
</body>
</html>
クラス行では、enoghスペースがある場合にどのコンテンツを1つの行に入れるべきかを識別します。ウィンドウが小さくなると、内容(各col-md-4)が互いに下に置かれます。
ブートストラップライブラリを含めることを忘れないでください。
すべてである必要があります。
関連する問題
- 1. 3列の応答レイアウト
- 2. CSS 3列応答レイアウト
- 3. Android(ICS)NFCリクエストと応答可能
- 4. Caroufredsel応答可能な可視アイテム
- 5. pure.CSS:応答は、ブートストラップ3の列
- 6. 応答可能なマテリアライズカードの作成
- 7. colspanの応答可能なデータ問題
- 8. 2または3応答列ブートストラップ
- 9. CSSと応答可能なヘッダー/ナビゲーションの問題
- 10. APIオートメーション - ポストコールの応答を得ることが可能です
- 11. FB.Event.subscribe( 'auth.logout'、機能(応答)と
- 12. Python 3 csv.reader空の応答
- 13. Cakephp 3のプロセスコードページ応答後
- 14. NVD3を使用した応答円グラフ
- 15. 応答可能モードのデータテーブルng-clickは機能しません。
- 16. 角度のある材質の応答可能なスクロール可能なdiv
- 17. ブートストラップ3画像応答が
- 18. ズーム可能な円のタイトル
- 19. Citrus静的応答アダプタ応答テンプレートの辞書を適用することは可能ですか?
- 20. 応答可能なデータ型 - 列が子行に折りたたまれない
- 21. IE8でのみ404応答が可能ですか?
- 22. 応答可能で特定のオプションを設定するデータ型
- 23. 既存のWebアプリケーションを応答可能にする
- 24. 応答可能なタブの透明な背景
- 25. 利用可能な場合、部分的にPHPのAjax応答
- 26. cssテーブルの内容を応答可能にするには
- 27. JSONの配列と解析の応答
- 28. 3等幅div間のマージン(応答)
- 29. Zend Framework 3 AJAXの応答データ
- 30. 応答性の高いカスタム列とデータテーブル