在bootstrap中设置从右到左的单选按钮 [英] set right to left radio button in bootstrap

问题描述

我正在使用 Farsi 语言，它是左边的。
我在 Bootstrap（版本3.3.6）中遇到了一些问题。
例如在单选按钮中，我希望收音机放在相关标签的右侧。

 < div class =row container> 
< h2>表格控件：内嵌单选按钮< / h2> 
< p>下面的表格包含三个内嵌单选按钮：< / p> 
< form role =form> 
< h4>< font face =B Nazanin> 
< label class =radio-inline> 
< input type =radioname =optradio> 
یاا$ 
< / label> 
< label class =radio-inline> 
< input type =radioname =optradio> 
گزینهدوم
< / label> 
< / font>< / h4> 
< / form> 
< / div> 
  

我已经尝试了很多选项，如方向：rtl，文本对齐，文本右键，正确等，但他们没有工作。
另外，我想把整个表格放在中间。


解决方案

在输入 s和无线电输入之前的标签 s将自然出现在其关联的标签的右侧。

您的标记看起来像这样：

 < div class =row container> 
< h2>表格控件：内嵌单选按钮< / h2> 
< p>下面的表格包含三个内嵌单选按钮：< / p> 
< form role =form> 
< h4>< font face =B Nazanin> 
< label for =id1class =radio-inline> 
گزینهدوم
< / label> 
< input type =radioname =optradioid =id1> 
< label for =id2class =radio-inline> 
یاا$ 
< / label> 
< input type =radioname =optradioid =id2> 
< / font>< / h4> 
< / form> 
< / div> 
  

以下是 Bootply 。

编辑： 你在最后一行中提到你想让整个事情集中。

有三种选择：

只需使用 .container

将您的文本置于 text-align：center;

使用Bootstrap的网格系统将您的内容居中

I am using Farsi language which is a right to left. I have couples of problems with this feature in Bootstrap (version 3.3.6). For example in radio button I want that the radio put in the right of the associated 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 class="radio-inline">
      <input type="radio" name="optradio">
        گزینه اول
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">
        گزینه دوم
    </label>
   </font></h4>
  </form>
</div>

I have tried many option like direction:"rtl", text-align, text-right, pull-right, etc. but they did not work. Also, I want to put whole of the form at the middle.

解决方案

You simply broke your Markup, place your labels before the inputs and the radio inputs will naturally appear on the right side of their associated label.

Your Markup will look like this:

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

And here's the Bootply.

EDIT:

You mentioned in your last line that youd'd like the whole thing to be centered.

There's three options for that:

Center your content by only using .container

Center your text with text-align:center;

Center your content by using Bootstrap's grid system

这篇关于在bootstrap中设置从右到左的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！