Wie wird diese Drei-Spalten-Ansicht an die zentrierte zweispaltige Ansicht angepasst?

Question

Wie wird diese Drei-Spalten-Ansicht an die zentrierte zweispaltige Ansicht angepasst? Ich habe ein paar Dinge ausprobiert, aber ich habe es nicht geschafft, es zur Arbeit zu bringen.

Wenn es funktioniert, reagiert es nicht in kleineren Bildschirmen.

Jede Hilfe wird geschätzt. Vielen Dank im Voraus

Screenshot:

I want this to two column centered view.

Sie können auch den folgenden Ausschnitt ansehen:

#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

schnelle Antwort: .col-sm-6-Klasse hinzufügen, um dieses div

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

zu sein

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

---

DETAILS:

in Bootstrap können Sie ansprechende Spalten mit diesen Klassen machen:

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

die # ist die Nummer zwischen 1 und 12, und es ist ein Verhältnis zum Beispiel .col- md-12 hat eine Breite von 100% auf mittleren Bildschirmen und . Col-sm-6 wird eine Breite von 50% auf kleinen Bildschirmen haben und so weiter

---

voll documntation: http://v4-alpha.getbootstrap.com/layout/grid/