2
Im 이베이 (Ebay) 목록에 대한 설명 편집 스크립팅이 허용되지 않는 곳. 이베이 (ebay) 설명은 이베이 (eBay) 템플릿에 내장되어 있습니다.어떻게 모바일에서 부트 스트랩 그리드 문제를 해결할 수 있습니까?
내 #portfolio가 mobile에 올바르게 표시되지 않습니다.
desktop에서 col-lg-3이므로 정상적으로 작동합니다. 모바일 ive에서 col-xs-6을 2 x 2 격자로 사용했습니다. 문제는 마지막 열이 다른 행으로 드래그된다는 것입니다. 내 문제를 표시하는 위의 모바일 이미지를 참조하십시오.
누가 나에게 새로운 열로 빨려 들어가는 마지막 열을 멈추게하는 새로운 CSS 트릭을 가르쳐 줄 수 있습니까?
<div id="portfolio" class="container-fluid text-center ">
<h2><font color="#ce2065">the shills black mask</font><br><font size="1"> </font></h2>
<div class="row">
<div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint1.jpg" class="img-responsive img-thumbnail img-circle margin" alt="Image" style="text-align: center; width: 60%;">
<p style="text-align: center;"><span style="line-height: 1.8;">The latest trend in skincare. </span>Proven results with the word’s best selling black mask - loved by beauty bloggers, as seen on YouTube</p>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint2.jpg" class="img-responsive img-thumbnail img-circle margin" alt="Image" style="text-align: center; width: 60%;">
<p><span style="line-height: 1.8;">Activated charcoal quickly and effectively pulls blackheads from the root and aids skin regeneration. Promotes healthy skin too!</span></p>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint3.jpg" class="img-responsive img-thumbnail img-circle margin" style="text-align: center; width: 60%;">
<p><span style="line-height: 1.8;">Brightening naturally-derived ingredients calendula, rosemary and grapefruit help restore a plump, youthful complexion.</span></p>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint2.jpg" class="img-responsive img-thumbnail img-circle margin" style="text-align: center; width: 60%;" alt="Image">
<p><span style="line-height: 1.8;">Deeply penetrates the pores to remove acne-causing oil, which is also the main cause of acne outbreaks. Three more words.</span></p>
<p>
<br>
</p>
</div>
</div>
</div>
CSS :
/*Portfolio items*/
#portfolio .portfolio-item {
margin: 0 0 15px;
right: 0;
border: 1px outset rgba(255, 255, 255, 0.6);
}
#portfolio .portfolio-item:hover {
transition: 0.5s;
box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.9);
}
#portfolio .portfolio-item .portfolio-link {
display: block;
position: relative;
max-width: 400px;
margin: 0 auto;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
background: rgba(0, 0, 0, .7);
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: all ease .5s;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s,
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
position: absolute;
width: 100%;
height: 20px;
font-size: 20px;
text-align: center;
top: 50%;
margin-top: -12px;
color: #fff;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
margin: 0;
}
#portfolio .portfolio-item .portfolio-caption {
max-width: 400px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
padding: 25px;
}
#portfolio .portfolio-item .portfolio-caption h4 {
color: #fff;
text-transform: none;
margin: 0;
}
#portfolio .portfolio-item .portfolio-caption p {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 13px;
margin: 0;
}
#portfolio * {
z-index: 2;
}
@media (min-width:767px) {
#portfolio .portfolio-item {
margin: 0 0 30px;
}
}
너무 감사합니다, 그것은했다. 더 자세한 설명을 위해 문서를 자세히 살펴보기 –
마지막 열은 모바일 뷰포트가 아닌 다른 행으로 드래그됩니다. 첫 번째 카드의 높이가 두 번째 카드의 높이를 초과 할 때 발생합니다. 그래서 세 번째 요소는 "거품"으로 동작하고 네 번째 행을 다음 행으로 푸시합니다. – Banzay