ブートストラップカラムが正常に動作しない

Question

ブートストラップカラムに問題がありますが、想定通りの動作をしていません。下の写真では、4つのプロファイルボックスを中央に配置する必要があります.3つの列が「スマート&クリエイティブ」セクションの中央に配置されるのと同じ方法です。残念ながら、私はjsfiddleにリンクすることはできませんが、私はコードの下に画像を見て、コードセクションでCSSのためにスクロールダウンしました。

<!-- smart and creative --> 
    <div class="smart-creative"> 
     <div class="row"> 
     <div class="container"> 
      <div class="title col-xs-12"> 
      <h2>Smart &amp; Creative</h2> 
      <p>This is why you will use it :)</p> 
      </div> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="container"> 
      <div class="circles col-md-4 col-sm-4"> 
      <div class="circle1"></div> 
      <h4>Multi purpose</h4> 
      <p>Lorem ipsum dolor sit amet,<br /> consectetur adipisicing..</p> 
      </div> 
      <div class="circles col-md-4 col-sm-4"> 
      <div class="circle2"></div> 
      <h4>Flat UI</h4> 
      <p>Lorem ipsum dolor sit amet,<br /> consectetur adipisicing..</p> 
      </div> 
      <div class="circles col-md-4 col-sm-4"> 
      <div class="circle3"></div> 
      <h4>Creative Design</h4> 
      <p>Lorem ipsum dolor sit amet,<br /> consectetur adipisicing..</p> 
      </div> 
     </div> 
     </div> 
    </div> 

    <!-- Team --> 
    <div class="team"> 
     <div class="row"> 
     <div class="container"> 
      <div class="team-title col-md-12"> 
      <h2>Talented &amp; Experts</h2> 
      <p>This is our team</p> 
      </div> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="container"> 
      <div class="profile-wrapper"> 
      <div class="profiles pic1 col-md-3 col-sm-3"> 
       <div class="pic-holder"> 

       </div> 
       <div class="desc"> 
       <h5>Mahmoud Baghagho<h5> 
       <p>Senior UI Designer</p> 
       </div> 
       <div class="twitter-button"> 
       <span class="fa fa-twitter">Follow</span> 
       </div> 
      </div> 
      <div class="profiles pic1 col-md-3 col-sm-3"> 
       <div class="pic-holder"> 

       </div> 
       <div class="desc"> 
       <h5>Mahmoud Baghagho<h5> 
       <p>Senior UI Designer</p> 
       </div> 
       <div class="twitter-button"> 
       <span class="fa fa-twitter">Follow</span> 
       </div> 
      </div> 
      <div class="profiles pic1 col-md-3 col-sm-3"> 
       <div class="pic-holder"> 

       </div> 
       <div class="desc"> 
       <h5>Mahmoud Baghagho<h5> 
       <p>Senior UI Designer</p> 
       </div> 
       <div class="twitter-button"> 
       <span class="fa fa-twitter">Follow</span> 
       </div> 
      </div> 
      <div class="profiles pic1 col-md-3 col-sm-3"> 
       <div class="pic-holder"> 

       </div> 
       <div class="desc"> 
       <h5>Mahmoud Baghagho<h5> 
       <p>Senior UI Designer</p> 
       </div> 
       <div class="twitter-button"> 
       <span class="fa fa-twitter">Follow</span> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 






    CSS 
// Smart and Creative 
.smart-creative{ 
    background-color: $theme1-color; 
    color: white; 
    .title{ 
    text-align: center; 
    padding-top: 10px; 
    p{ 
     color: $header-color; 
    } 
    } 
    .circles{ 
    padding-top: 25px; 
    h4,p{ 
     text-align: center; 
    } 
    p{ 
     color: $header-color; 
    } 
    .css-for-circle{ 
     height: 100px; 
     width: 100px; 
     background-color: $header-color; 
     border-radius: 50px; 
     background-position: center; 
     background-repeat: no-repeat; 
     margin: 0 auto; 
    } 
    .circle1{ 
     background-image: url("../imgs/multi.png"); 
     @extend .css-for-circle; 
    } 
    .circle2{ 
     background-image: url("../imgs/flat.png"); 
     @extend .css-for-circle; 
    } 
    .circle3{ 
     background-image: url("../imgs/creative.png"); 
     @extend .css-for-circle; 
    } 
    } 
} 


// Team 
.team{ 
    background-color: $theme2-color; 
    .team-title{ 
    h2,p{ 
     text-align: center; 
    } 
    } 
    .profile-wrapper{ 
    margin: 0 auto; 
    width: 95%; 
    overflow: hidden; 
    .profiles{ 
     max-width: 230px; 
     height: 341px; 
     background-color: white; 
     border-radius: 5px; 
     .pic-holder{ 
     max-width: 164px; 
     height: 164px; 
     border-radius: 82px; 
     background-color: $theme2-color; 
     margin: 0 auto; 
     position: relative; 
     top: 25px; 
     box-shadow: inset 3px 3px 6px -2px #48804B; 
     -moz-box-shadow: inset 3px 3px 6px -2px #48804B; 
     -webkit-box-shadow: inset 3px 3px 6px -2px #48804B; 
     -o-box-shadow: inset 3px 3px 6px -2px #48804B; 
     background-image: url("http://placehold.it/147x147"); 
     background-repeat: no-repeat; 
     background-size: 90%; 
     background-position: center; 
     } 
     .desc{ 
     padding: 45px 0 20px 0; 
     h5,p{ 
      text-align: center; 
     } 
     } 
     .twitter-button{ 
     max-width: 204px; 
     height: 43px; 
     background-color: $theme2-color; 
     margin: 0 auto; 
     border-radius: 2px; 
     .fa-twitter{ 
      font-size: 35px; 
      color: white; 
     } 
     } 
    } 
    } 
} 

Answer 1

まず、行は私でなければならないNSIDE容器。

しかし、あなたの本当の問題は、ここでの最大幅を設定されています

.profiles{max-width: 230px;} 

あなたは列がその自然の幅に拡大させないことです。

Answer 2

これはDIV：例えば

<div class="row"> 

正しい方法、：：

<div class="container"> 

は1つの保持する必要があり、すべての

<div class="container"> 
    <div class="row"> 
     <div class="title col-xs-12"> 
      <h2>Smart &amp; Creative</h2> 
      <p>This is why you will use it :)</p> 
     </div> 
    </div> 
</div> 

Answer 3

.team .profile-wrapper .profiles { 
max-width: 230px; 
} 

列幅を小さくする必要があります。 私は
http://codepen.io/payalpatel2299/pen/MbRwxo