Bootstrap 3网格对齐

时间：2017-11-02 10:28:54

标签： css twitter-bootstrap gridview bootstrap-4 responsive

大家好日子

我需要一些引导网格对齐的帮助，我面临的问题是当它进入响应模式时，它会堆叠，就像我需要堆栈一样。我非常感谢你帮助折叠和叠加正确的方式，以便它在移动设备上整洁。

如果有人可以在没有造型的情况下帮助我修复骨骼，我会非常感激，并且不适应风格。

我有两个示例图像，一个是完整视图，一个是它需要堆叠或折叠的方式。

enter image description here enter image description here 

This is my code

＆＃13;
＆＃13; 
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;
	color: #000;
}
.my_subTitle {
    font-size:0.80em;
	color: #A64470 ;
	color: #000;
}
.my_planPrice {
    font-size:0.80em;
    font-weight: bold;
	color: #C0BBBB;    
}
.my_disc {
    font-size:1.4em;
    font-weight: bold; 
	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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

This is how it is wrapping now on mobile

1 个答案:

答案 0 :(得分：0)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="col-sm-12 col-md-6 col-lg-6">

<div class="row">
  <div class="col-sm"><img src="http://www.placehold.it/90x90" class="img-responsive" alt="Some picture" width="100%" height="150"></div>
  <div class="col-sm my_planHeader my_plan1"><div class="lukeStuff">Balance Transfers</div><div class="my_planTitle">0% for 24 months</div></div>
  <div class="col-sm my_planHeader my_plan2"><div class="lukeStuff">Balance Transfers</div><div class="my_planTitle">0% for 24 months</div></div>
  <div class="col-sm my_planHeader my_plan3"><div class="lukeStuff">Balance Transfers</div><div class="my_planTitle">0% for 24 months</div></div>
</div>
<div class="col-sm-12 col-md-12 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-sm-12 col-md-12 col-lg-12 my_planHeader my_plan3"><div class="lukeStuff">Balance Transfers</div><div class="my_planTitle">0% for 24 months</div></div>
</div>

＆＃13;
＆＃13; 
    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;
	color: #000;
}
.my_subTitle {
    font-size:0.80em;
	color: #A64470 ;
	color: #000;
}
.my_planPrice {
    font-size:0.80em;
    font-weight: bold;
	color: #C0BBBB;    
}
.my_disc {
    font-size:1.4em;
    font-weight: bold; 
	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;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="col-sm-12 col-md-6 col-lg-6">
    
<div class="row">
  <div class="col-sm"><img src="http://www.placehold.it/90x90" class="img-responsive" alt="Some picture" width="100%" height="150"></div>
  <div class="col-sm my_planHeader my_plan1"><div class="lukeStuff">Balance Transfers</div><div class="my_planTitle">0% for 24 months</div></div>
  <div class="col-sm my_planHeader my_plan2"><div class="lukeStuff">Balance Transfers</div><div class="my_planTitle">0% for 24 months</div></div>
  <div class="col-sm my_planHeader my_plan3"><div class="lukeStuff">Balance Transfers</div><div class="my_planTitle">0% for 24 months</div></div>
</div>
<div class="col-sm-12 col-md-12 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-sm-12 col-md-12 col-lg-12 my_planHeader my_plan3"><div class="lukeStuff">Balance Transfers</div><div class="my_planTitle">0% for 24 months</div></div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题