세 개의 열보기를 가운데 두 개의 열보기로 맞추는 방법?

Question

세 개의 열보기를 가운데 두 개의 열보기로 맞추는 방법? 몇 가지 시도를했지만 제대로 작동하지 못했습니다.

작동하면 작은 화면에서도 반응하지 않습니다.

도움이 될 것입니다. 사전

에서 감사

스크린 샷 :

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

신속한 답변 :이

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

이되고있는 div에 는 .COL-SM-6 클래스를 추가

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

---

세부 사항 :

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