前提・実現したいこと
bootstrapを用いたレスポンシブのLPを製作中です。
992px以下でで3カラム→1カラムといったレイアウトにしたいと思っています。
発生している問題・エラーメッセージ
992pxまで3カラム
991〜716pxまで上段に2カラム、下段に1カラム
715px以下で1カラム
991〜716pxの2−1となる部分も1カラムで表示したく思います。
該当のソースコード
html
1<div class="reviews container"> 2 <h2>タイトル</h2> 3 <div class="reviews_container row"> 4 <div class="review review_1 col-md-4"> 5 <!-- 内容--> 6 </div> 7 <div class="review review_2 col-md-4"> 8 <!-- 内容--> 9 </div> 10 <div class="review review_3 col-md-4"> 11 <!-- 内容--> 12 </div> 13 </div> 14 </div>
CSS
1.reviews{ 2 width:100%; 3 height:1120px; 4 background-color: #F2F2F2; 5 position: relative; 6 overflow: hidden; 7} 8 9.reviews_container{ 10 width:1020px; 11 text-align: center; 12 margin: 0 auto; 13} 14 15.review{ 16 width: 320px; 17 height: 800px; 18 background-color: #fff; 19 display: inline-block; 20 padding: 30px 30px 50px; 21 margin: 10px; 22 border: solid 1px #CCCCCC; 23 position: relative; 24 box-shadow: 1px 1px 10px rgba(0,0,0,0.1); 25 vertical-align: middle; 26} 27 28@media screen and (max-width: 992px){ 29 .reviews_container{ 30 width: 100%; 31 } 32 33 .reviews{ 34 height: 2671px; 35 } 36}
試したこと
col-4をsm,lgでも試しました。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/20 02:15
2018/08/20 08:52
2018/08/20 09:17
2018/08/20 09:23
2018/08/22 10:51