更改行类div bootstrap 3中的控件顺序

Question

好吧，我正在构建一个使用twitter bootstrap 3的Web应用程序，并且支持英语和阿拉伯语两种语言，每种语言有两个不同的母版页， 我正在使用div与类.row将控件放入其中 默认情况下，控件内部行从左到右开始 当我将我的网站语言更改为阿拉伯语时，我想要从右到左反转行内的所有项目 我正在使用样式表文件更改母版页，我尝试过浮动和方向，但它对我来说对于.row类

中div的项目无效

<asp:Panel ID="pnl_TaskContent" runat="server" class="row">
                  <asp:Panel ID="pnl_TaskColumn" runat="server" class="col-md-12">
                      <div class="box-body">
                          <div class="row">
                              <div class="col-md-3">
                                  <%--Task Name--%>
                                  <div class="form-group">
                                      <asp:Label ID="lbl_Task_Name" runat="server" Text="Task Name" Font-Bold="True" Font-Italic="False"></asp:Label>
                                      <div class="input-group">
                                          <span class="input-group-addon"><i class="fa fa-pencil">
                                              <asp:RequiredFieldValidator ID="RequiredFieldValidator27" runat="server" ErrorMessage="*"
                                                  ControlToValidate="txt_Task_Name" ForeColor="Red" ValidationGroup="saveTask" Font-Bold="True" Font-Size="Medium"></asp:RequiredFieldValidator>
                                          </i></span>
                                          <asp:TextBox ID="txt_Task_Name" runat="server" ClientIDMode="Static" CssClass="form-control"></asp:TextBox>
                                          <div class="input-group-btn">
                                              <asp:Button ID="button_tf" CssClass="btn btn-default dropdown-toggle" runat="server" Text="Functions" data-toggle="dropdown" ValidationGroup="none" />
                                              <ul class="dropdown-menu">
                                                  <li>
                                                      <asp:Button ID="btn_AddTaskFunModal" CssClass="btn btn-default btn-block" runat="server" ValidationGroup="novali" Text="Add/Edit" data-toggle="modal" data-target="#addTaskFunctions-modal" /></li>
                                                  <li>
                                                      <asp:Button ID="btn_BrowseTaskFunModal" CssClass="btn btn-default btn-block" runat="server" ValidationGroup="novali" Text="Edit" data-toggle="modal" data-target="#BrowseTaskFunctions-modal" /></li>
                                              </ul>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                  <%--Task Status--%>
                                  <div class="form-group">
                                      <asp:Label ID="lbl_Task_Status" runat="server" Text="Task Status" Font-Bold="True" Font-Italic="False"></asp:Label>
                                      <div class="input-group">
                                          <span class="input-group-addon"><i class="fa fa-signal">
                                              <asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" ErrorMessage="*"
                                                  ControlToValidate="ddl_Task_Status" ForeColor="Red" ValidationGroup="saveTask" Font-Bold="True" Font-Size="Medium"></asp:RequiredFieldValidator>
                                          </i></span>
                                          <asp:DropDownList ID="ddl_Task_Status" runat="server" ClientIDMode="Static" CssClass="form-control" Enabled="False">
                                              <asp:ListItem Value="N">New</asp:ListItem>
                                              <asp:ListItem Value="A">Active</asp:ListItem>
                                          </asp:DropDownList>
                                      </div>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                  <%--Task Priority--%>
                                  <div class="form-group">
                                      <asp:Label ID="lbl_Task_Proirity" runat="server" Text="Task Priority" Font-Bold="True" Font-Italic="False"></asp:Label>
                                      <div class="input-group">
                                          <span class="input-group-addon"><i class="fa fa-flag">
                                              <asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" ErrorMessage="*"
                                                  ControlToValidate="ddl_Task_Proirity" ForeColor="Red" ValidationGroup="saveTask" Font-Bold="True" Font-Size="Medium"></asp:RequiredFieldValidator>
                                          </i></span>
                                          <asp:DropDownList ID="ddl_Task_Proirity" runat="server" ClientIDMode="Static" CssClass="form-control">
                                              <asp:ListItem Value="H">High</asp:ListItem>
                                              <asp:ListItem Value="M">Medium</asp:ListItem>
                                              <asp:ListItem Value="L">Low</asp:ListItem>
                                          </asp:DropDownList>
                                      </div>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                  <%--Completion Rate--%>
                                  <div class="form-group">
                                      <asp:Label ID="lbl_Task_CompRate" runat="server" Text="Completion Rate" Font-Bold="True" Font-Italic="False"></asp:Label>
                                      <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txt_Task_CompRate" ErrorMessage="0-100" Font-Bold="True" ForeColor="Red" MaximumValue="100" MinimumValue="0" SetFocusOnError="True" Type="Integer" ValidationGroup="saveTask"></asp:RangeValidator>
                                       <div class="input-group">
                                          <span class="input-group-addon"><i class="fa fa-flag">
                                              <asp:RequiredFieldValidator ID="RequiredFieldValidator31" runat="server" ErrorMessage="*"
                                                  ControlToValidate="txt_Task_CompRate" ForeColor="Red" Font-Bold="True" Font-Size="Medium" ValidationGroup="saveTask"></asp:RequiredFieldValidator>
                                          </i></span>
                                          <asp:TextBox ID="txt_Task_CompRate" runat="server" ClientIDMode="Static" CssClass="form-control">0</asp:TextBox>
                                                                                   <span class="input-group-addon"><i><b>%</b>
                                          </i></span>
                                            </div>
                                  </div>
                              </div>
                          </div>

当我将显示顺序更改为rtl时，我想要的是更改行内的控件

当方向从左到右但控件没有按预期显示时

Answer 1

嗯，你的帖子中有不可用的html，所以我无法测试，但去年我为这个旧的存储库做出了贡献：https://github.com/carasmo/bootstrap-rtl/blob/master/dist/css/bootstrap-rtl.css

更改方向时有一些有用的代码。这是3.1，但其中一些仍然运作良好。您必须通过它来查看您需要调整的内容。

以下是输入组修复的示例：

DEMO：http://jsbin.com/tipufu/1/edit

假设

body {direction:rtl}

RTL的CSS：

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.input-group-addon:first-child {
  border-right: 1px solid #cccccc;
  border-left: 0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.input-group-addon:last-child {
  border-right: 0;
  border-left: 1px solid #cccccc;
}

.input-group-btn:first-child > .btn {
  margin-left: -1px;
}

.input-group-btn:last-child > .btn {
  margin-right: -1px;
}

.input-group-btn > .btn {
  position: relative;
}

.input-group-btn > .btn + .btn {
  margin-right: -4px;
}

.input-group-btn > .btn:hover,
.input-group-btn > .btn:active {
  z-index: 2;
}

某些HTML

  <div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>