在引导程序中设置从右到左单选按钮答案

【问题标题】：set right to left radio button in bootstrap在引导程序中设置从右到左单选按钮
【发布时间】：2016-04-16 22:35:24
【问题描述】：

我使用的是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>

我尝试了许多选项，例如方向：“rtl”、text-align、text-right、pull-right 等，但它们都不起作用。另外，我想把整个表格放在中间。

【问题讨论】：

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您只需破坏您的标记，将您的labels 放在inputs 之前，无线电inputs 将自然地出现在它们关联的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

【讨论】：

你的解决方案是正确的，但是有一个问题：当你点击一个标签时，它的收音机没有选择
再检查一遍，我只是补充说，使用标签时应该使用for，表明标签属于哪个电台。

【解决方案2】：

所以如果你的语言和我一样是波斯语，我假设你的身体是从右到左的方向，this is the Working Demo。顺便说一句，有一个 RTL 版本的引导程序库，我认为它适合你，看看 this library。

【讨论】：

但是当body方向变为rtl时，radio和label重叠在一起，label几乎放在radio下面！！！
是的，它会的，因为引导程序默认方向是 LTR，你也需要将所有元素的方向更改为 RTL。
我将所有元素的方向设置为 rtl 但它仍然重叠

【解决方案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;
}

【讨论】：

这可悲地破坏了代码，输入与标签重叠。也不需要自定义 CSS。
@Tarekis 你使用 Bootstrap 吗？如果您使用 Bootstrap，这可以工作
好像没有，要么你有修改过的版本，要么是3.3.5以外的版本，见here。
抱歉，但不确定 Bootply 在这种情况下是否正常工作，因为如果您尝试检查输出，您会发现上面编写的样式尚未应用。
完全不知道你在说什么，我从来没有遇到过 bootply 的问题。请参阅此screenshot，Bootply 正确处理 CSS 代码。

【解决方案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>

希望这会有所帮助。

【讨论】：

Answer 不起作用，它破坏了代码，并且没有解释。