从右到左对齐Bootstrap列以支持RTL语言

Question

我试图设计一个阿拉伯风格的形式.我使用过面板类.文本字段通常从左侧开始,但我想从右到左设计表单.

.heading {
  font-family: monospace;
  font-size: 30px;
  color: #0D91A5;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 ">
  <center>
    <h2 class="heading"> Registration</h2>
  </center>
</div>
<div class="container" style="margin-top:30px">
  <div class="col-md-10 col-md-offset-1">
    <div class="panel panel-info" style="direction: rtl;">
      <div class="panel-heading">
        <h3 class="panel-title"><strong class="strong"> ?????? ???? | Executive Details</strong></h3>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class=".col-sm-5 .col-md-6" style="direction: rtl;">
            <div class="form-group col-md-12 ">
              <div class="col-md-6 col-xs-12 col-xs-12 col-md-offset-6">
                <input type="text" name="id_no" id="id_no" class="form-control" placeholder=" ???| ID Number" tabindex="1">
              </div>
              <div class="col-md-6 col-xs-12 col-md-offset-0">
                <input class="form-control" type="text" name="name" id="name" class="form-control" placeholder="  ???| Name " tabindex="1">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这是编码我正在使用class offset-6 for textfield start to right side但是另一个textfiled with same grom从另一行开始.我想在同一行的框字段.

任何人都可以告诉我我想使用哪个班级？或者我可以更改bootsrap css文件？

Answer 1

要设计RTL布局,请使用Bootstrap RTL:

<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-rtl.css" rel="stylesheet" />

添加bootstrap-rtl.css(在bootstrap.css文件之后),它将覆盖与rtl支持相关的所有CSS属性.