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

时间:2016-04-06 20:20:46

标签: html css twitter-bootstrap css3

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

3 个答案:

答案 0 :(得分: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 */

答案 1 :(得分:0)

您可以使用text-right类。

答案 2 :(得分:0)

您可以在表单子元素

上使用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>