Question

我正在尝试在下面的网址（位于其侧边栏区域的底部）中的RTL“更多过滤器”复选框： http://www.vasterad.com/themes/listeo_latest/listings-list-with-sidebar.html 谁能知道我该怎么做？

我尝试插入以下属性：

 Direction: rtl;

或

 Float: right;

甚至

 text-align: right;

它们中的任何一个都不能RTL方形复选框，只有文本标签RTL。 ::选择器之前插入的方形复选框。我也尝试用:: after选择器替换它。不再工作。它知道这可能很简单，但实际上我不知道。谁能帮我？谢谢

Answer 1

在文件style.css中将left: 0;的属性.checkboxes label:before更改为right: 0;：

.checkboxes label:before {
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 10px;
    position: absolute;
    right: 0; //***************change here************//
    top: 3px;
    background-color: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: all .25s;
    font-family: fontawesome;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 15px;
}

Answer 2

尝试此操作，您必须像示例中一样检查jquery的版本和引导程序。它可能无法在旧版本中使用：

.pagination {
    margin: 9px 0 0;
    text-align: center;
    overflow: hidden;
direction: rtl;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    
 <div class="pagination-container margin-top-20 margin-bottom-40">
 
<nav class="pagination">
		<ul>
	   <li><a href="#" class="current-page">1</a></li>
	   <li><a href="#">2</a></li>
	   <li><a href="#">3</a></li>
	   <li><a href="#"><i class="sl sl-icon-arrow-right"></i></a></li>
		</ul>
</nav>
   </div>

我在引导程序主题的特殊部分遇到了RTL问题

2 个答案: