Question

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="panel-body" style="direction: rtl;">
  <form class="form-horizontal" role="form" method="POST" action="#">
    <input type="hidden" name="_token" value="LX7HWby1aME0NLMslEr2AHkxTRGBK7pRDYKTrh9P">
    <div class="form-group">
      <label for="name" class="col-md-4 control-label">Name</label>
      <div class="col-md-6">
        <input id="name" type="text" class="form-control" name="name" value="">
      </div>
    </div>
    <div class="form-group">
      <label for="email" class="col-md-4 control-label">E-Mail Address</label>
      <div class="col-md-6">
        <input id="email" type="email" class="form-control" name="email" value="">
      </div>
    </div>
    <div class="form-group">
      <label for="content" class="col-md-4 control-label">Content</label>
      <div class="col-md-6">
        <textarea id="content" rows="4" class="form-control" cols="50" name="content"></textarea>
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-6 col-md-offset-4">
      <button type="submit" class="btn btn-primary">
        <i class="fa fa-envelope-o" aria-hidden="true"></i> Send
      </button>
    </div>
  </div>
</form>
</div>

如果您在全尺寸屏幕上运行上面的代码段，您会看到标题位于左侧，输入位于右侧（彼此相邻）

我的网站支持多种语言，如您所知，某些语言是rtl方向。所以我需要一起改变输入和标题的位置。我的意思是我需要通过添加一些CSS代码来调整右侧的输入和左侧的标题（与当前结构相反）。

我该怎么做？

当前用户界面：

预期用户界面：（仅使用CSS，不更改HTML）

Answer 1

在您的情况下，您可以将:lang(ar) .form-group label{ /* You can put here all the desired properties */ } css选择器与rtl语言一起使用。

例如使用阿拉伯语，您可以使用：

{{1}}

您可以在 CSS-Tricks's :lang() selector tutorial 中详细了解它，但您必须注意其浏览器兼容性。

Answer 2

使用pull-right类

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-

BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="panel-body" style="direction: rtl;">
  <form class="form-horizontal" role="form" method="POST" action="#">
    <input type="hidden" name="_token" value="LX7HWby1aME0NLMslEr2AHkxTRGBK7pRDYKTrh9P">
    <div class="form-group">

      <label for="name" class="col-md-2 control-label  pull-right" style="text-align:left" >Name</label>
      <div class="col-md-10">
        <input id="name" type="text" class="form-control" name="name" value="">
      </div>
    </div>
    <div class="form-group">
      <label for="email" class="col-md-2 control-label pull-right " style="text-align:left">E-Mail Address</label>
      <div class="col-md-10">
        <input id="email" type="email" class="form-control" name="email" value="">
      </div>
    </div>
    <div class="form-group">
      <label for="content" class="col-md-2 control-label pull-right " style="text-align:left">Content</label>
      <div class="col-md-10">
        <textarea id="content" rows="4" class="form-control" cols="50" name="content"></textarea>
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-6 col-md-offset-4">
      <button type="submit" class="btn btn-primary">
        <i class="fa fa-envelope-o" aria-hidden="true"></i> Send
      </button>
    </div>
  </div>
</form>
</div>

＆＃13;

Answer 3

您可以使用bootstrap-rtl为您完成这项工作。

Bootstrap RTL提供简单而强大的从右到左的功能 Bootstrap 3，采用它的新主题特征。简单地说吧在bootstrap的原始CSS之后的CSS，到Bootstrap设计的页面它就像原始Bootstrap
之上的扩展一样工作

您可以从服务器中包含它或使用CDN。对于CDN示例：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.css" />

如何更改标签的方向？

当前用户界面：

预期用户界面：（仅使用CSS，不更改HTML）

3 个答案: