この3つの列ビューを中央の2列ビューに整列する方法は？

Question

この3つの列ビューを中央の2列ビューに揃える方法は？ 私はいくつかのことを試しましたが、うまく動作するように管理していませんでした。

動作すると、小さな画面では反応しません。

ご協力いただければ幸いです。アドバンス

で おかげ

スクリーンショット：

I want this to two column centered view。

#aa-latest-property { 
 
    background-color: #f8f8f8; 
 
    display: inline; 
 
    float: left; 
 
    text-align: center; 
 
    width: 100%; 
 
    padding: 100px 0; 
 
} 
 
#aa-latest-property .aa-latest-property-area { 
 
    display: inline; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
#aa-latest-property .aa-latest-property-area .aa-latest-properties-content { 
 
    display: inline; 
 
    float: left; 
 
    margin-top: 20px; 
 
    width: 100%; 
 
} 
 
.aa-properties-item { 
 
    display: inline; 
 
    float: left; 
 
    margin-top: 30px; 
 
    width: 100%; 
 
    position: relative; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -ms-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 
.aa-properties-item:hover { 
 
    box-shadow: 1px 2px 5px 3px #ccc; 
 
} 
 
.aa-properties-item .aa-properties-item-img { 
 
    width: 100%; 
 
} 
 
.aa-properties-item .aa-properties-item-img img { 
 
    width: 100%; 
 
} 
 
.aa-properties-item .aa-tag { 
 
    color: #fff; 
 
    padding: 6px 10px; 
 
    position: absolute; 
 
    left: 15px; 
 
    top: -15px; 
 
} 
 
.aa-properties-item .for-rent { 
 
    background-color: #20ceb3; 
 
} 
 
.aa-properties-item .sold-out { 
 
    background-color: #ff0000; 
 
} 
 
.aa-properties-item .aa-properties-item-content { 
 
    background-color: #fff; 
 
    border: 1px solid #ddd; 
 
    border-top: none; 
 
    display: inline; 
 
    float: left; 
 
    width: 100%; 
 
}

<div class="aa-latest-property-area"> 
 

 
    <div class="aa-latest-properties-content"> 
 
    <div class="row"> 
 

 
     <h3>We create an environment for all the professionals where the work itself gets stimulated.</h3> 
 
     <div class="col-md-4"> 
 
     <article class="aa-properties-item"> 
 
      <a href="#" class="aa-properties-item-img"> 
 
      <img src="img/core.jpeg" alt="img"> 
 
      </a> 
 

 
      <div class="aa-properties-item-content"> 
 

 
      <div class="aa-properties-about"> 
 
       <h3>Core Values</h3> 
 
       <p>We are guided by the core values of: Professionalism, Transparent dealings, Integrity, Dedication, Commitment, Hard work, Fair play and ethical working…</p> 
 
      </div> 
 

 
      </div> 
 
     </article> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <article class="aa-properties-item"> 
 
      <a href="#" class="aa-properties-item-img"> 
 
      <img src="img/core.jpeg" alt="img"> 
 
      </a> 
 

 
      <div class="aa-properties-item-content"> 
 

 
      <div class="aa-properties-about"> 
 
       <h3>Core Values</h3> 
 
       <p>We are guided by the core values of: Professionalism, Transparent dealings, Integrity, Dedication, Commitment, Hard work, Fair play and ethical working…</p> 
 
      </div> 
 

 
      </div> 
 
     </article> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</section>

Answer 1

迅速な答え：あなたはまた、次のコードをチェックアウトすることができます

これに.COL-SM-6クラスを追加があることを

<div class="col-md-4"> 

をDIV

<div class="col-md-4 col-sm-6"> 

---

DETAILS：

.col-lg-# /* for large screens */ 
.col-md-# /* for medium screens */ 
.col-sm-# /* for small screens */ 
.col-xs-# /* for extra small screens */ 

＃は1と12の間の数であり、それは例えば、 .col-ための比率 です：あなたはこれらのクラスを使用して応答列を作ることができ、ブートストラップで

中画面でmd-12の幅が100％になる および .col-sm-6は、小画面で幅が50％になる など

---

フルdocumntation：http://v4-alpha.getbootstrap.com/layout/grid/