Q&A
###前提・実現したいこと
いつもお世話になっております。
bootstrapを利用して、添付資料のような画面を作成したい。
各枠は、iframeを使ってコンテンツを表示させるつもりです。
offsetを使ってずらすことは出来ましたが、やりたいこととは違い、
また、画面を小さくすると、offsetしている分、画面がずれて
表示されてしまいます。
bootstrapでは、こういう画面構成は出来ないのでしょうか？
ご教授よろしくお願いします。
###該当のソースコード
<div class="container-flud"> <div class="row"> <div class="col-xs-12 col-sm-6"> <div class="embed-responsive embed-responsive-4by3" height="300" style="width:100% !important;overflow:auto !important;-webkit-overflow-scrolling:touch !important;"> <iframe src="a.php" id="a" class="embed-responsive-item" frameborder="0" style="margin:20px 0px;"></iframe> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="embed-responsive embed-responsive-4by3" height="150" style="width:100% !important;overflow:auto !important;-webkit-overflow-scrolling:touch !important;"> <iframe src="b.php" id="b" class="embed-responsive-item" frameborder="0" style="margin:20px 0px;"></iframe> </div> </div> <div class="col-xs-12 col-sm-6 col-xs-offset-6"> <div class="embed-responsive embed-responsive-4by3" height="150" style="width:100% !important;overflow:auto !important;-webkit-overflow-scrolling:touch !important;"> <iframe src="c.php" id="c" class="embed-responsive-item" frameborder="0" style="margin:20px 0px;"></iframe> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="embed-responsive embed-responsive-4by3" height="150" style="width:100% !important;overflow:auto !important;-webkit-overflow-scrolling:touch !important;"> <iframe src="d.php" id="d" class="embed-responsive-item" frameborder="0" style="margin:20px 0px;"></iframe> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="embed-responsive embed-responsive-4by3" height="150" style="width:100% !important;overflow:auto !important;-webkit-overflow-scrolling:touch !important;"> <iframe src="e.php" id="e" class="embed-responsive-item" frameborder="0" style="margin:20px 0px;"></iframe> </div> </div> </div> <!-- row --> </div> <!-- container -->
回答1件
0
ベストアンサー
このようなコードで実現できないでしょうか。少し実験のために変えましたが、構造は同じだと思います。
キモは②と③を同一階層内に置くところです。
HTML
1<div class="container-flud"> 2 <div class="row"> 3 <div class="col-xs-12 col-sm-6"> 4 <div class="embed-responsive embed-responsive-4by3" style="height:300px; width:100%; background-color: #F56B6B;"> 5 1 6 </div> 7 </div> 8 <div class="col-xs-12 col-sm-6"> 9 <div class="embed-responsive embed-responsive-4by3" style="height:150px; width:100%; background-color: #6B75F5;"> 10 2 11 </div> 12 <div class="embed-responsive embed-responsive-4by3" style="height:150px; width:100%; background-color: #B96BF5;"> 13 3 14 </div> 15 </div> 16 <div class="col-xs-12 col-sm-6"> 17 <div class="embed-responsive embed-responsive-4by3" style="height:150px; width:100%; background-color: #FFEB41;"> 18 4 19 </div> 20 </div> 21 <div class="col-xs-12 col-sm-6"> 22 <div class="embed-responsive embed-responsive-4by3" style="height:150px; width:100%; background-color: #B3FF59;"> 23 5 24 </div> 25 </div> 26 </div> <!-- row --> 27 </div> <!-- container -->
2017/04/11追記
この方法が推奨されている方法なのかわかりませんが、このコードでお望みの通りに動きました
HTML
1<div class="container-flud"> 2 <div class="row"> 3 <div class="col-xs-12 col-sm-6" style="height:300px; padding-right:0;"> 4 <div class="embed-responsive embed-responsive-4by3" style="padding-bottom:300px; width:100%; background-color: #F56B6B;"> 5 1 6 </div> 7 </div> 8 <div class="col-xs-12 col-sm-6" style="height:300px; padding:0;"> 9 <div class="embed-responsive embed-responsive-4by3" style="padding-bottom:150px; width:100%; background-color: #6B75F5;"> 10 2 11 </div> 12 <div class="embed-responsive embed-responsive-4by3" style="padding-bottom:150px; height:150px; width:100%; background-color: #B96BF5;"> 13 3 14 </div> 15 </div> 16 <div class="col-xs-12 col-sm-6" style="height:150px; padding-right:0;"> 17 <div class="embed-responsive embed-responsive-4by3" style="padding-bottom:150px; height:150px; width:100%; background-color: #FFEB41;"> 18 4 19 </div> 20 </div> 21 <div class="col-xs-12 col-sm-6" style="height:150px; padding:0;"> 22 <div class="embed-responsive embed-responsive-4by3" style="padding-bottom:150px; height:150px; width:100%; background-color: #B3FF59;"> 23 5 24 </div> 25 </div> 26 </div> <!-- row --> 27 </div> <!-- container -->
投稿2017/04/10 00:57
編集2017/04/11 01:09
総合スコア191
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/10 09:30
2017/04/11 00:55
2017/04/11 03:42
2017/04/11 21:40