如何将此三列视图与居中的两列视图对齐? 我尝试了很多东西,但我没有设法让它发挥作用。
当它工作时,它在较小的屏幕中没有响应。
任何帮助将不胜感激。 在此先感谢
屏幕截图:
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>
答案 0 :(得分:0)
快速回答: 将.col-sm-6类添加到此div
<div class="col-md-4">
是
<div class="col-md-4 col-sm-6">
详情:
在bootstrap中,您可以使用这些类创建响应列:
.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% 等等