Question

我使用的Farsi语言是right to left。我在Bootstrap (version 3.3.6)中对此功能有几个问题。例如，在单选按钮中，我希望收音机放在相关标签的右侧。

<div class="row container">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons:</p>
  <form role="form">
    <h4><font face="B Nazanin">
    <label class="radio-inline">
      <input type="radio" name="optradio">
        گزینه اول
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">
        گزینه دوم
    </label>
   </font></h4>
  </form>
</div>

我尝试了许多选项，例如方向：＆＃34; rtl＆＃34;，文字对齐，文字右键，右拉等，但它们不起作用。另外，我想把整个表格放在中间。

Answer 1

您只是打破了标记，将label放在input之前，广播input将自然出现在相关label的右侧。

您的标记将如下所示：

<div class="row container">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons:</p>
  <form role="form">
    <h4><font face="B Nazanin">
    <label for="id1" class="radio-inline">
    گزینه دوم   
    </label> 
    <input type="radio" name="optradio" id="id1"> 
    <label for="id2" class="radio-inline">
    گزینه اول     
    </label> 
    <input type="radio" name="optradio" id="id2"> 
   </font></h4>
  </form>
</div>

这是Bootply。

修改

你在上一行中提到你希望整个事情都集中在一起。

有三种选择：

Center your content by only using .container

Center your text with text-align:center;

Center your content by using Bootstrap's grid system

Answer 2

因此，如果您的语言与我一样是波斯语，我认为您的身体将是从右到左的方向，this is the Working Demo。顺便说一下，我认为适用于你的RTL版bootstrap的库，请看this library。

Answer 3

你只需要添加一些自己的CSS样式

首先将标记更改为此 -

<div class="row container">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons:</p>
  <form role="form">
   <h4><font face="B Nazanin">
    <label class="radio-inline">
     گزینه اول
     <input type="radio" name="optradio">
    </label>
    <label class="radio-inline">
     گزینه دوم
     <input type="radio" name="optradio">
    </label>
  </font></h4>
 </form>
</div>

然后将这些样式添加到css文件中 -

.radio-inline {
      display: inline;
      padding-left: 0;
      padding-right: 20px;
}
.radio-inline input {
      margin-left: 0;
      margin-right: -20px;
}

Answer 4

<div class="row container">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons:</p>
  <form role="form">
    <h4><font face="B Nazanin">
    <label class="radio-inline">
      گزینه اول
      <input type="radio" name="optradio">        
    </label>
    <label class="radio-inline">
      گزینه دوم
      <input type="radio" name="optradio">
    </label>
   </font></h4>
  </form>
</div>

希望这有帮助。

在bootstrap中设置从右到左的单选按钮

4 个答案: