如何将此三列视图与居中的两列视图对齐？

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

快速回答：将 .col-sm-6 class 添加到此 div

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

成为

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

详情：

在 bootstrap 中，您可以使用这些 classes 制作响应式列：

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

完整文档：http://v4-alpha.getbootstrap.com/layout/grid/

如何将此三列视图与居中的两列视图对齐？

How to Align this Three Column view to Centered two - column view?

html

css

center

alignment

responsive