Я пытаюсь сделать нижнюю правую сероватую коробку (единственную без изображения) той же высоты и ширины, что и другие коробки с изображениями. Он должен быть отзывчивым, но если мне удастся сделать его подходящим для этой резолюции, он не будет работать в других резолюциях. Я попытался с помощью flexbox, но не смог заставить его работать. Я использую Bootstrap, как вы можете видеть. Я также пробовал использовать vh и vw, но не повезло ...Равные коробки высоты и ширины в Bootstrap?
Я был бы очень признателен, если бы кто-то с большим опытом мог сказать мне правильный способ сделать это? Спасибо всем за чтение и помощь!
Вот скриншот того, что я пытаюсь достичь:
Вот мой код до сих пор:
<!-- T E A M S E C T I O N -->
<section id="team" class="no-padding">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h1><span class="orange">[ </span>Meet Our Team<span class="orange"> ]</span></h1>
<p>A perfect blend of creativity and technical wizardry.</br>The best people formula for great websites!</p>
</div>
</div>
<div class="row no-gutter">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/1.jpg" title="">
<img src="img/team/1.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/2.jpg" title="">
<img src="img/team/2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/3.jpg" title="">
<img src="img/team/3.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/4.jpg" title="">
<img src="img/team/4.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/5.jpg" title="">
<img src="img/team/5.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/6.jpg" title="">
<img src="img/team/6.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/7.jpg" title="">
<img src="img/team/7.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/8.jpg" title="">
<img src="img/team/8.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="team-box">
<div class="team-box-last">
<h3>Want to join our team?</h3>
<p>We’re always looking for talented designers, developers, project managers and anyone who’s driven and has a passion for the digital industries.
</p>
<ul>
<li><a href="#">Check our jobs page</a></li>
<li><a href="mailto: [email protected]">Send us your CV</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
/* -------- TEAM SECTION -------- */
#team{
background-color: #fff;
text-align: center;
width: 100%;
}
#team h1{
color: #345;
font-weight: 700;
margin-top: 50px;
margin-bottom: 50px;
}
#team p{
color: #345;
font-size: 21px;
margin-top: 0px;
margin-bottom: 50px;
padding-left: 15px;
padding-right: 15px;
}
.no-padding {
padding: 0;
}
.no-gutter > [class*=col-] {
padding-right: 0;
padding-left: 0;
}
.team-box {
display: block;
position: relative;
margin: 0 auto;
max-width: 650px;
overflow: hidden;
}
.team-box img{
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.team-box:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.team-box .team-box-caption {
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
opacity: 1;
background: transparent;
/* background: rgba(67,208,243,0.9);
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s; */
}
.team-box .team-box-caption .team-box-caption-content {
position: absolute;
bottom: 12px;
width: 100%;
text-align: left;
}
.team-box .team-box-caption .team-box-caption-content .name,
.team-box .team-box-caption .team-box-caption-content .position {
padding: 0 15px;
text-shadow: 0px 0px 5px #000;
}
.team-box .team-box-caption .team-box-caption-content .name {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
}
.team-box .team-box-caption .team-box-caption-content .position {
font-size: 12px;
text-transform: uppercase;
}
.team-box:hover .team-box-caption {
opacity: 1;
}
@media(min-width:768px) {
.team-box .team-box-caption .team-box-caption-content .name {
font-size: 15px;
}
.team-box .team-box-caption .team-box-caption-content .position {
font-size: 15px;
text-transform: uppercase;
}
}
.team-box-last{
text-align: left;
padding: 30px 30px;
}
.team-box:last-child{
background-color: #f3f3f3;
}
#team .team-box-last h3{
color: #345;
padding-top: 15px;
padding-left: 15px;
}
#team .team-box-last p{
font-size: 18px;
line-height: 23px;
padding-top: 15px;
margin-bottom: 30px;
}
#team .team-box-last ul{
padding-left: 15px;
}
#team .team-box-last ul li{
font-size: 18px;
font-weight: 500;
}
#team .team-box-last ul li{
list-style: none;
}
Этот вопрос задан раньше: http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height –
Спасибо за ваш ответ. Я читаю его сейчас. Надеюсь, он решит мою проблему. –
Пробовал все ответы из указанной выше ссылки, но они не фиксируют мою проблему + они испортили мои другие разделы, которые я создал раньше ... Grrr ... –