bootstrap練習中です。
row一行の中にcolomnを3つつくり、そのうちの真ん中のcolomnにclassにalign-self-centerを指定してrowを2行入れたところそのcolomnの背景色であるbg-successが表示されなくなりました。再び表示するにはどのようにしたらよろしいでしょうか。よろしくお願いいたします。
bootstrap
1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title>GETTING STARTED WITH BRACKETS</title> 8 <meta name="description" content="Bootstrap Basics"> 9 10 11 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 12 <link rel="stylesheet" hrefs="styles.css"> 13 14 </head> 15 <body> 16 <div class="container-fluid"> 17 <div class="row" style="height: 200px;"> 18 19 <div class="col-4 bg-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quisquam blanditiis qui ad, iusto quae vitae labore fugiat at dolore deleniti atque impedit libero molestias natus, veritatis laborum ullam veniam.</div> 20 21 <div class="col-4 bg-success align-self-center"> 22 <div class="row bg-warning">nested column1 bottom1</div> 23 <div class="row bg-warning">nested column2 bottom2</div> 24 </div> 25 26 <div class="col-4 d-flex bg-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore in possimus, laborum ratione autem officiis culpa accusamus, iusto distinctio ipsum placeat soluta, aliquam debitis nostrum aliquid totam eveniet nesciunt obcaecati!3 27 </div> 28 29 </div> 30 31 </div> 32 33 34 <script 35 src="https://code.jquery.com/jquery-3.3.1.min.js" 36 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 37 crossorigin="anonymous"></script> 38 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 39 40 </body> 41</html> 42
#### 試したこと
colomnにheight=200px;を指定(最初のrowの高さ)
colomnのclassにh-100を指定
colomnのclassにflex-columnを指定
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/07 19:14
2019/02/07 21:45
2019/02/08 01:49
2019/02/12 13:18