html - 使用语言切换器时的css问题
问题描述
我已经安装了一个语言切换器插件,从 LTR 到 RTL。在此页面中,它们是原始 html 原始问题:当我将语言切换到 RTL 时,框会出现在最右边和最左边
添加什么,所以当用户切换语言时,这些框将与英文版具有相同的对齐方式
代码:
<div class="vc_row wpb_row vc_row-fluid" style="background: white;">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="vc_empty_space" style="height: 32px"><span class="vc_empty_space_inner"></span></div>
<div class="vc_empty_space" style="height: 32px"><span class="vc_empty_space_inner"></span></div>
<div class="widget-text-heading no-line">
<h3 class="title">
<span>WHY INVEST IN</span>
DUBAI ? </h3>
</div>
<div class="widget widget-features-box default">
<div class="content">
<div class="row">
<div class="col-xs-12 col-sm-6 box-align1">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-5@2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">EXPO 2020</h3>
<div class="description">It expected that roughly 28 million people will visit Dubai by Expo 2020</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align2">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-2@2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">MULTI-SECTORED ECONOMY</h3>
<div class="description">65% of global investment and a multi-sectored economy that does not rely on oil.</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align1">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-8@2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">INVESTMENT-FRIENDLY</h3>
<div class="description">A safe country for investment, supported with 0% income tax policy and facilitated by laws that ease business creation.</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align2">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-7@2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">PASSPORT RECOGNITION</h3>
<div class="description" style="margin: 0 0 26px 0;">The strongest Passport
<br>world-wide</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align1">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-3@2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">GLOBAL HUB</h3>
<div class="description">Dubai airport is considered the 3rd most visited in the world, they celebrated the 1 Billionth traveler in 2018</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align2">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-6@2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">RELIABLE INVESTMENT</h3>
<div class="description">Investments worth 37 Billion AED from Gulf residents. Total transactions reached 111 Billion in Dubai 2018.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.description {
margin: 0 0 20px 0;
}
.icon-inner{
background:#fff !important;
box-shadow:none;
}
@media only screen and (max-width: 767px) {
.col-xs-12 {
padding: 0px 14%;
}
}
@media only screen and (min-width: 768px) {
.col-sm-6 {
height: 240px;
width: 25%;
margin: 23px 12%;
background: whitesmoke;
box-shadow: 2px 2px 30px -6px #8e99a3;
margin-bottom: 80px;
}
.box-model {
position: absolute;
top: -95px;
left: 10%;
width: 80%;
}
.box-align1{
right:-80px !important;
}
.box-align2{
left:-80px !important;
}
.title{
margin-bottom:80px !important;
}
}
@media only screen and (min-width: 992px) {
.col-sm-6 {
height: 238px;
width: 25%;
margin: 23px 12%;
background: whitesmoke;
box-shadow: 2px 2px 30px -6px #8e99a3;
margin-bottom: 90px;
}
.box-model {
position: absolute;
top: -95px;
left: 10%;
width: 80%;
}
.box-align1{
right:-105px !important;
}
.box-align2{
left:-105px !important;
}
.title{
margin-bottom:80px !important;
}
}
@media only screen and (min-width: 1141px) {
.col-sm-6 {
width: 25%;
margin: 23px 12%;
background: whitesmoke;
box-shadow: 2px 2px 30px -6px #8e99a3;
height: 230px !important;
margin-bottom: 100px;
}
.box-model {
position: absolute;
top: -95px;
width: 80%;
left: 10%;
}
.box-align1{
right:-126px !important;
}
.box-align2{
left:-126px !important;
}
.title{
margin-bottom:80px !important;
}
}
@media only screen and (min-width: 1141px) {
.box-align1{
right:-114px !important;
}
.box-align2{
left:-114px !important;
}
}
@media only screen and (min-width: 1200px) {
.box-align1{
right:-125px !important;
}
.box-align2{
left:-125px !important;
}
}
@media only screen and (min-width: 1290px) {
.box-align1{
right:-162px !important;
}
.box-align2{
left:-162px !important;
}
}
</style>
解决方案
推荐阅读
- python - 使用变量访问 pandas 多索引
- object-detection - 在 Mask-RCNN 中选择哪个最后一层来获得对象的最佳代表性特征?
- openwhisk - 云函数 - 无法使用大 python virtualenv 创建
- css - Safari浏览器上的网站移动菜单损坏
- php - Quickbooks PHP SDK OAuth2,如何获取和存储访问/刷新令牌
- webrtc - Remote offer sdp:设置远程视频描述发送参数失败
- java - Netbeans 10(带有 Maven)中的 JavaFX 11 没有 Sources/Javadocs
- apl - 标量和向量之间的区别在 APL 中有何用处?
- php - 更改从序列化形式创建的数组中的键和值
- java - Transforming a nested List using java Streams