-2
グッドデイすべてのあなたの天才ブートストラップ3グリッドアライメント
私はいくつかのブートストラップグリッドアライメントを支援する必要がある、私が直面している問題は、応答モードになったとき、私はそれをスタックする必要があるようにそれを積み重ねるんです。これを折り畳んで正しい方向に積み重ねることで、モバイルデバイス上ですべてがきれいになるように助けてくれて本当に感謝しています。
誰かがスタイリングなしでスケルトンを手伝ってくれたら、本当に感謝しています。
私は2つの画像例を持っています.1つは全景で、もう1つはどのように積み重ねるか、または折りたたむ必要があります。
This is my code
div.parent {
border : solid black 1px;
display : table;
padding : 5px;
width : 100%;
/* you can change/remove margin */
margin :5px 0;
}
div.text {
vertical-align : middle;
display : table-cell;
text-align : justify;
}
div.parent .img {
vertical-align : middle;
display : table-cell;
padding-right : 5px;
width : 100px; /* you can change width */
}
div.img img {
width : 100%;
/* you can change height */
vertical-align : middle;
}
.my_planHeader {
text-align: center;
color: white;
padding-top:0.2em;
padding-bottom:0.2em;
}
.my_planTitle {
font-size:1em;
\t color: #000;
}
.my_subTitle {
font-size:0.80em;
\t color: #A64470 ;
\t color: #000;
}
.my_planPrice {
font-size:0.80em;
font-weight: bold;
\t color: #C0BBBB;
}
.my_disc {
font-size:1.4em;
font-weight: bold;
\t color: #C0BBBB;
}
.my_planDuration {
margin-top: -0.6em;
}
@media (max-width: 768px) {
.my_planTitle {
font-size:small;
}
}
/* --- TRANSFERS --------------------------- */
.my_plan1 {
background: rgb(224,234,242);
}
.my_planHeader.my_plan1 a {
background: rgb(72, 109, 139);
color:white;
}
.my_planHeader.my_plan1 {
background: #FEF6ED;
border-bottom: thick solid #FEEAD2;
}
/* --- FEE --------------------------- */
.my_plan2 {
background: rgb(230,235,218);
}
.my_planHeader.my_plan2 a {
background: rgb(108, 131, 62);
color:white;
}
.my_planHeader.my_plan2 {
background: #FCDFD1;
border-bottom: thick solid #FEF1EC;
}
/* --- APR --------------------------- */
.my_plan3 {
background: rgb(254,235,212);
}
.my_planHeader.my_plan3 a {
background: rgb(199, 127, 40);
color:white;
}
.my_planHeader.my_plan3 {
background: #F7D5DF;
border-bottom: thick solid #FBEDF1;
}
/* --- OVER --------------------------- */
.my_plan4 {
background: rgb(254,235,212);
}
.my_planHeader.my_plan4 a {
background: rgb(199, 127, 40);
color:white;
}
.my_planHeader.my_plan4 {
background: #EAD3DD;
border-bottom: thick solid #F7D5DF;
}
/* --- OVER --------------------------- */
.my_plan5 {
background: rgb(254,235,212);
}
.my_planHeader.my_plan5 a {
background: rgb(199, 127, 40);
color:white;
}
.my_planHeader.my_plan5 {
background: #F8F8F8;
border-bottom: thick solid #C0BBBB;
}<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<div class="container">
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div class="row">
<div class="parent">
<div class="img">
<div class="col-lg-12 ">
<img src="http://www.placehold.it/90x90" class="img-responsive" alt="Some picture" width="150" height="150">
</div></div>
<div class="text">
<div class="col-lg-3 my_planHeader my_plan1">
<div class="my_subTitle">Balance Transfers</div>
<div class="my_planTitle">0% for 24 months</div>
</div>
<div class="col-lg-3 my_planHeader my_plan2">
<div class="my_subTitle">Balance Transfers</div>
<div class="my_planTitle">0% for 24 months</div>
</div>
<div class="col-lg-3 my_planHeader my_plan3">
<div class="my_subTitle">Balance Transfers</div>
<div class="my_planTitle">0% for 24 months</div>
</div>
<div class="col-lg-3 my_planHeader my_plan1">
<div class="my_subTitle">Balance Transfers</div>
<div class="my_planTitle">0% for 24 months</div>
</div>
<div class="col-lg-12 ">
<p>Free aqua credit checker. Start with a credit limit of £250-£1,200 and you could get an increase on your 4th statement.
Once the 0% deal ends the balance transfer rate will be 34.95% p.a. variable with a 3% fee.</p>
</div>
<div class="col-lg-12 my_planHeader my_plan3">
<div class="my_subTitle">Balance Transfers</div>
<div class="my_planTitle">0% for 24 months</div>
</div>
</div>
</div>
</div>
</div>
</div>This is how it is wrapping now on mobile
これは私のコードです – Luke
@Lukeこれは画像です。あなたはコードの面で、あなたが試したことを私たちに見せてもらえますか？質問を編集して追加することができます –
https://codepen.io/mdxsolutions/pen/EbVByq – Luke