如何更改引導程序表單方向，文本右側文本框左側？

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>