如何更改标签的方向?

时间:2016-10-31 10:31:42

标签: html css twitter-bootstrap direction

<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代码来调整右侧的输入和左侧的标题(与当前结构相反)

我该怎么做?

当前用户界面:

enter image description here

预期用户界面:(仅使用CSS,不更改HTML)

enter image description here

3 个答案:

答案 0 :(得分:0)

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

例如使用阿拉伯语,您可以使用:

{{1}}

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

答案 1 :(得分:0)

使用pull-right

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

您可以使用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" />