如何更改引导程序表单方向，文本右侧文本框左侧？

Question

这个链接的例子

 <form class="form-horizontal" role="form" action="#"> <div class="form-group"> <label class="col-sm-2 control-label">עיר</label> <div class="col-sm-10"> <input class="form-control" id="Text5" type="text"/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">רחוב</label> <div class="col-sm-3"> <input class="form-control" id="Text6" type="text" /> </div> <label class="col-sm-2 control-label">מס'</label> <div class="col-sm-5"> <input class="form-control" type="text" /> </div> </div>

我想改变方向：从右到左。 文本右，文本框左

Answer 1

只需创建一个文件，将其命名为 bootstrap-ext-rtl.css || bootstrap-ext-rtl.module.css 包含：

.rtl { direction: rtl}
.ltr { direction: ltr}
.bidi-rtl{ direction: rtl; unicode-bidi: bidi-override }
/* with/without text-align or whatever you want :P */

Answer 2

您可以使用text-right类。

Answer 3

您可以使用direction: rtl; 在您的表单子元素上

 .form-horizontal * { direction: rtl; }

 <form class="form-horizontal" role="form" action="#"> <div class="form-group"> <label class="col-sm-2 control-label">עיר</label> <div class="col-sm-10"> <input class="form-control" id="Text5" type="text"/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">רחוב</label> <div class="col-sm-3"> <input class="form-control" id="Text6" type="text" /> </div> <label class="col-sm-2 control-label">מס'</label> <div class="col-sm-5"> <input class="form-control" type="text" /> </div> </div>