我需要一些关于自举天沟宽度的帮助，我已经尝试了几乎所有东西，但仍然不能在三角形之间制作更大的空间/填充，我想要做得更大。尝试添加课程等。
这是干净的代码
媒体
@media only screen and (max-width : 1200px) {
/* Team */
.team-item .team-triangle {
width: 90px;
height: 90px;
}
.team-triangle .content {
width: 160px;
height: 160px;
}
.team-hover i {
margin-top: 50px;
}
.team-hover p {
font-size: 14px;
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
/* Team */
.team-item .team-triangle {
width: 120px;
height: 120px;
}
.team-triangle .content {
width: 190px;
height: 190px;
}
.team-hover i {
margin-top: 57px;
}
#team-section .col-md-2:nth-child(7n+5),
#team-section .col-md-2:nth-child(7n+1){
margin-left: 0 !important;
clear: none !important;
}
#team-section .col-md-2 {
float: left;
margin-bottom: 80px;
width: 33.3333%;
}
HTML
div class="container">
<div class="row">
<div class="team-items">
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.2s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title" />
<div class="team-hover text-center">
<a class="overlay" href="#"></a>
<i class="fa fa-male"></i>
<p>Plalalal</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.3s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-female"></i>
<p>Jane Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.4s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-male"></i>
<p>John Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.5s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-male"></i>
<p>John Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<a class="overlay" href="#"></a>
<div class="team-container wow bounceIn" data-wow-delay="0.6s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-male"></i>
<p>John Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
/* ===== Begin team ===== */
.team-item {
height: 130px;
}
.team-item .team-triangle {
width: 130px;
height: 130px;
background: transparent;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 0 auto;
position: relative;
top: 25px;
box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 7px #dadbdb;
overflow: hidden;
}
.team-item img {
max-width: 100%;
}
.team-items {
margin-bottom: 50px;
padding-top: 0px;
margin-top: 0;
}
.team-triangle .content {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: -35px;
position: absolute;
left: -37px;
width: 190px;
height: 190px;
}
.team-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba( 103, 109, 117, 0.9);
opacity: 0;
-webkit-transition: opacity 0.4s ease-in; /* For Safari 3.1 to 6.0 */
transition: opacity 0.4s ease-in;
}
.team-item .team-triangle:hover .team-hover {
opacity: 1;
}
.team-hover i {
color: rgba(255, 255, 255,.75);
font-size: 28px;
margin-top: 57px;
position: relative;
}
.team-hover p {
color: #ffffff;
font-size: 16px;
font-weight: 400;
margin-top: 0;
}
.team-items .col-md-2:nth-child(7n+5) {
clear: left;
margin-left: 24.9999999%;
}
.team-items .col-md-2:nth-child(7n+1) {
clear: left;
margin-left: 16.6666666%;
}
/* ===== End team ===== */
答案 0 :(得分：0)
也许你想要这样的东西。
.large-gutter > [class*='col-'] {
padding-right:50px;
padding-left:50px;
}
HTML
<div class="row large-gutter">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>