1
내 모든 항목을 의도 한대로 작동하지 않습니다,하지만, 난 여전히이 문제가 :부트 스트랩 그리드 레이아웃 문제는 - 같은 높이로 설정되어 그리드 레이아웃
<!-- featured-box -->
<div class="featured-box">
<div class="col-md-4 col-sm-4 col-xs-6">
<div class="video-box featured-event-box">
<div class="row">
<div class="col-md-4">
<div class="featured-event-image-box">
<a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a>
</div>
</div>
<div class="col-md-8">
<p>20th Jan 2016</p>
<h4 class="featured-event-heading truncate"><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h4>
<p class="truncate-multiple" title="Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6">
<div class="video-box">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qYv5R_e5hTM" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6">
<div class="video-box featured-event-box">
<div class="row">
<div class="col-md-4">
<div class="featured-event-image-box">
<a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a>
</div>
</div>
<div class="col-md-8">
<p>20th Jan 2016</p>
<h4 class="featured-event-heading truncate"><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h4>
<p class="truncate-multiple" title="Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6">
<div class="video-box">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/feQ99SuGdsw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6">
<div class="video-box featured-event-box">
<div class="row">
<div class="col-md-4">
<div class="featured-event-image-box">
<a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a>
</div>
</div>
<div class="col-md-8">
<p>20th Jan 2016</p>
<h4 class="featured-event-heading truncate"><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h4>
<p class="truncate-multiple" title="Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6">
<div class="video-box">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/r_KEWddTrVc" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!-- featured-box -->
CSS :
를.featured-heading-box {
padding: 0 15px;
}
.featured-heading {
font-size: 20px;
padding: 0 0 15px 0;
border-bottom: 1px solid #b2b2b2;
}
.video-box {
padding: 15px 0 15px 0;
/*border: 1px solid red;*/
}
/**
* https://css-tricks.com/snippets/css/css-box-shadow/#article-header-id-1
*/
.featured-event-box {
padding: 15px;
margin: 15px 0 15px 0;
min-height: 196px;
overflow: hidden;
border: 1px solid #e6e6e6;
background-color: #f9f9f9;
-moz-box-shadow: inset 0 0 10px #e6e6e6;
-webkit-box-shadow: inset 0 0 10px #e6e6e6;
box-shadow: inset 0 0 10px #e6e6e6;
}
.featured-event-image-box {
margin-bottom: 15px;
}
.featured-event-heading a {
font-size: 14px;
color: inherit;
}
.featured-event-heading a:hover {
text-decoration: none;
color: #888;
}
왜이 문제를 해결할 수 있습니까? 당신은 그리드의 열을 사용하려는 경우
아이디어는 중간 행의 왼쪽 하단에 두 개의 항목을 가지고있다? (미안 내가 명백한 진술을하는 것처럼 보이지만 여기 사람들의 마음을 읽을 수 있으므로 확인을 할 것입니다.) –