html
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 10 11 <title>Dotinstall App</title> 12 <style> 13 .cover{ 14 background: url(img/bg.png); 15 background-size: cover; 16 } 17 </style> 18 </head> 19 <body> 20<header> 21 <div class="cover text-white text-center py-5"> 22 <h1 class="display-4 mb-4">Dotinstall App</h1> 23 <a href= "" class="btn btn-primary btn-la">Get It Now!</a> 24 </div> 25</header> 26<main> 27 <section class="py-5"> 28 <h2 class="text-center mb-5">Features</h2> 29 <div class="container"> 30 <div class="mb-5 row"> 31 <div class="col-sm-8"> 32 <h3>Awesome</h3> 33 <p>Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.</p> 34 </div> 35 <div class="col-sm-4"> 36 <img src="img/phone.png" class="w-100 rounded-circle"> 37 </div> 38 </div> 39 <div class="row"> 40 <div class="col-sm-8"> 41 <h3>Awesome</h3> 42 <p>Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.</p> 43 </div> 44 <div class="col-sm-4"> 45 <img src="img/movie.png" class="w-100 rounded-circle"> 46 </div> 47 </div> 48 </div> 49 </section> 50</main> 51<footer> 52</footer> 53 <!-- Optional JavaScript --> 54 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 55 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 56 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 57 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 58 </body> 59</html> 60
長いですが、お願いします。。
解決策
<style>
.cover{
background: url(img/bg.png);
background-size: cover;
}
.col-sm-8 p{
word-wrap: break-word;
}
</style>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/12/26 18:21
退会済みユーザー
2018/12/26 18:21