ブートストラップガターの幅を変更する

Question

私はブートストラップのガターの幅について助けが必要です。私はほとんどすべてを牽引しますが、まだ大きなスペース/パディングを作ることはできません。 Traidは、クラスなどを追加。..

ここでクリーンなコードは、たぶん、あなたはこのような何かをしたい

メディア

@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 ===== */ 

Answer 1

です。

.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>