<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代码来调整右侧的输入和左侧的标题(与当前结构相反)。
我该怎么做?
答案 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
类
<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;
答案 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" />