Question

example of it at this link

<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>

我想改变方向：从右到左。 text-right，textbox- left

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>

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

3 个答案: