如何在使用语言切换器时自定义css



我需要以下的帮助

页面的链接:https://mirakrealty.com/services/?preview_id=1182&preview_nonce=3adae2fc8b&amp_thumbnail_id=-1&preview=真实

  • 我安装了一个语言切换器插件,从LTR到RTL
  • 在这个页面中,它们是一个原始的html原始
  • 问题:当我将语言切换到RTL时,文本的对齐方式保持在左侧

这是下面的代码

请建议添加什么,当用户切换语言时,我将与右侧对齐

代码:

<div class="vc_row wpb_row vc_row-fluid">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="widget widget-features-box  default">
<div class="content">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="feature-box">
<div class="feature-box-inner">
<div class="fbox-icon">
<div>
<img class="img"
src="https://mirakrealty.com/wp-content/uploads/2020/02/handshake-solid.png"
alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">MARKET <br>OVERVIEW</h3>
<div class="description">We are keen on educating our clients with the latest news and trends in the real estate market. Starting from facts and figures to law updates and to the extent of country transaction amounts.</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="feature-box">
<div class="feature-box-inner">
<div class="fbox-icon">
<div>
<img class="img" src="https://mirakrealty.com/wp-content/uploads/2020/02/800px_COLOURBOX28373425.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">PROPERTY <br>PURCHASING</h3>
<div class="description">Based on the investment plan, we handpick pieces of real-estate that suit the investor’s requirement the best. And we make sure that the investment opportunities available in the market yield high ROI.</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="feature-box">
<div class="feature-box-inner">
<div class="fbox-icon">
<div>
<img class="img" src="https://mirakrealty.com/wp-content/uploads/2020/02/cogs-solid.png" alt="">                            
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">PROPERTY <br>MANAGEMENT</h3>
<div class="description">In case a client desires to avail property management services, whether through short-term or long-term rentals. We facilitate this service after studying the unit and then offer the most suitable plan to the client.</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="feature-box">
<div class="feature-box-inner">
<div class="fbox-icon">
<div>
<img class="img" src="https://mirakrealty.com/wp-content/uploads/2020/02/business-time-solid.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">INVESTMENT <br>WALLETS</h3>
<div class="description">Start with buying your first property to gain financial freedom. Then progress by gaining indirect income through owning multiple properties around the world.</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="feature-box">
<div class="feature-box-inner">
<div class="fbox-icon">
<div>
<img class="img" src="https://mirakrealty.com/wp-content/uploads/2020/02/wallet-solid.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">CONSULTANCY AND INVESTMENT PLANNING</h3>
<div class="description">We spend time to study and understand the investor’s needs. We then focus on building and executing a time-bound profitable plan for the investor to achieve the goal agreed upon.</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="feature-box">
<div class="feature-box-inner">
<div class="fbox-icon">
<div>
<img class="img"
src="https://mirakrealty.com/wp-content/uploads/2020/02/1979644-200.png"
alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">EXTRA <br>SERVICES</h3>
<div class="description">- Receiving and evaluating the property<br>
- Property pricing evaluation<br>
- Facilitating and following up on legal matters <br>
- Representing the owners in owners management society
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.widget-features-box.default .ourservice-heading {
width: 70%;
border-bottom: 2px solid #114a82;
}
.widget-features-box.default .fbox-icon {
margin: 24px 9px;
}
.widget-features-box.default {
text-align: left;
}

@media screen and (max-width: 767px) {
.description {
margin: 0 0 15px 0;
}
.col-xs-12 {
border: 2px solid aliceblue;
}
}
@media screen and (min-width: 768px) {
.col-sm-4 {
width: 32.8%;
border: 2px solid aliceblue;
height: 335px;
margin: 0 2px;
}
.col-sm-4:hover {
box-shadow: 2px 2px 10px 10px #f0f9fb;
}
}
@media screen and (min-width: 992px) {
.col-sm-4 {
border: 2px solid aliceblue;

height: 310px;
width: 31.222%;
margin: 10px 10px;
}
.col-sm-4:hover {
box-shadow: 2px 2px 10px 10px #f0f9fb;
}
}
@media screen and (min-width: 1153px) {
.col-sm-4 {
width: 31.6%;
}
}
</style>

在样式表中,您必须更新rtl类的任何align left指令,该指令在切换到arabian时添加到主体中。例如:

.widget-features-box.default {
text-align: left;
}
body.rtl .widget-features-box.default {
text-align: right;
}

最新更新