css - 如果肢体语言发生变化，我们可以固定页面方向吗？

Question

我有一个 Web 表单，其中我在选择下拉菜单时将 master 中的肢体语言更改为阿拉伯语和英语，因此元素的方向从 ltr 更改为 rtl(如果英语为阿拉伯语)，反之亦然。我有一个页面继承了这个母版页，我不希望这个页面元素在肢体语言改变时改变它们的方向。

这就是肢体语言为英语时的样子

当转换为阿拉伯语时，它看起来像这样

我已经在此页面的元素上使用了 dir 属性 (dir='ltr')，但是当更改语言时它仍然改变方向

本页的 HTML :

     <div id="#phone" style="direction:ltr" dir="ltr">

                      <div class="col-xs-12 col-sm-6 col-md-6 scrolling-list-container" dir="ltr">
                        <div class="boxpadding boxshadow title-bar-standalone">
                            <div class="col-xs-2 col-sm-1 col-md-1 pull-left"><i class="max_side_icon fa fa-bolt"></i></div>
                            <ul class="scrolling-list-holder">
                                <%= FillEntityLevel() %>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-6 scrolling-list-container" dir="ltr">
                        <div class="boxpadding boxshadow title-bar-standalone">
                            <div class="col-xs-2 col-sm-1 col-md-1 pull-left"><i class="max_side_icon fa fa-bolt"></i></div>
                            <ul class="scrolling-list-holder">
                                <%= FillServiceLevel() %>
                            </ul>
                        </div>
                    </div>


                       <div class="panel panel-default panel-osmm-1 panel-osmm-3" dir="ltr">
         <span>Progress</span>
                  <div class="row nopadding" dir="ltr">
                      <div class="col-md-12 nopadding" dir="ltr">

                          <div class="row" dir="ltr">

                              <div class="col-lg-6 nopadding" dir="ltr">    
                                  <h3 style="text-align:center">Progress Chart</h3> <br />    
                                           <div id="Chart1Progress" class="ProgressChart" style="stroke-width:0px; width:550px" dir="ltr">


                               </div>


                              </div>
                                  <div class="col-md-2  nopadding" dir="ltr">
                                       <h3>Late Services</h3>
                              <div id="Chart2" class="grow  LateServiceChart" style="width:300px; height:100%" dir="ltr">


                               </div>
                               </div>

                                      <div class="col-md-2 nopadding" dir="ltr">
                                      <h3>Ongoing Services</h3> 

                                       <div id="Chart3" class="grow OngoingServices" style="width:300px; height:100%" dir="ltr">

                               </div>
                               </div>

                                      <div class="col-md-2 nopadding" dir="ltr">
                                      <h3>Complete Services</h3> 

                                   <div id="Chart4" class="grow CompleteServices" style="  width:300px; height:100%" dir="ltr">

                               </div>
                               </div>



                              </div>






                          </div>




                      </div>
                  </div>


       <div class="col-xs-12 col-sm-6 col-md-6 " style="direction:ltr" dir="ltr">
        <div class="panel panel-default panel-osmm-1 panel-osmm-3" dir="ltr">
            <div class="panel-heading">
                <div class="col-xs-2 col-sm-2 col-md-1 pull-right"><i class="panel-heading-icon fa fa-book"></i></div>
                Status
            </div>
            <div class="panel-body">

              You are at Add Scenario :
                <br /><br />
                <div class="row">
                    <div class="col-md-12">
                            <div class="col-md-4 " style="text-align:center">
                            <div class="FlowChartmain">
<div class="FlowChartcircle grow" id="C1">
<img src="images/user.png" />
</div>
<div id="horizontal_line1"></div>
<div class="FlowChartcircle grow" id="C2">
<img src="images/user.png" />
</div>
<div class="line" id="horizontal_line2"></div>
<div class="FlowChartcircle grow"id="C3">
<img src="images/user.png" />
</div>

<div class="line" id="vertical_line1"></div>

    <div class="FlowChartcircle grow"id="C4">
<img src="images/user.png" />
    </div>
    <div id="horizontal_line3"></div>

    <div class="FlowChartcircle grow" id="C5">
<img src="images/user.png" />
    </div>
    <div class="line" id="horizontal_line4"></div>
    <div class="FlowChartcircle grow"id="C6">
<img src="images/user.png" />
    </div>

<div class="line" id="vertical_line2"></div>

    <div class="FlowChartcircle grow"id="C7">
<img src="images/user.png" />
    </div>
    <div id="horizontal_line5"></div>
    <div class="FlowChartcircle grow"id="C8">
<img src="images/user.png" />
    </div>
    <div id="horizontal_line6"></div>
    <div class="FlowChartcircle grow"id="C9">
<img src="images/user.png" />

    </div>
</div>

                     </div>

<%--                     <div class="col-md-4 grow" style="text-align:center">
                              <a href="OSMM_ScenarioSetting.aspx">

                       <img width="100px" src="images/1.png" />
                       <br/>
                       <span>Add Scenario</span>
                                  </a>

                     </div>--%>

                        <div class="col-md-4 pull-right">
              <span><b>Days Left</b></span><br />
         <div id="myclock" class="myclock timer"></div>

                            </div>
                        </div>
               </div>
            </div>
                       <br /><br />

        </div>
           <br /><br />
    </div>

        <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="panel panel-default panel-osmm-1 panel-osmm-3">
            <div class="panel-heading">
                <div class="col-xs-2 col-sm-2 col-md-1 pull-right"><i class="panel-heading-icon fa fa-pencil"></i></div>
             Description
            </div>
            <div class="panel-body">


مشروع إطار الإجادة الوطني يهدف إلى قياس جودة الأداء المؤسسي من خلال قياس 6 معايير أساسية ومعرفة مدى تطبيق الجهات الحكومية اللوائح والقوانين الصادرة من الخدمة المدنية:  دليل الخدمات  و الميثاق والتحول الإلكتروني للخدمات.

            </div>
        </div>
    </div>

         <br />         <br />
         <br />
         <br />
         <br />

    <div class="col-xs-12 col-sm-6 col-md-6 ">
        <div class="panel panel-default panel-osmm-1 panel-osmm-3">
            <div class="panel-heading">
                <div class="col-xs-2 col-sm-2 col-md-1 pull-right"><i class="panel-heading-icon fa fa-pencil"></i></div>
                <%= Resources.Lang.ListDelayedServices %>
            </div>
            <div class="panel-body scrolling-list-container">

                    <%= FillServiceInfo(1) %>

            </div>
        </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="panel panel-default panel-osmm-1 panel-osmm-3">
            <div class="panel-heading">
                <div class="col-xs-2 col-sm-2 col-md-1 pull-right"><i class="panel-heading-icon fa fa-pencil"></i></div>
                <%= Resources.Lang.ListofOngoingServices %>
            </div>
            <div class="panel-body scrolling-list-container">

                    <%= FillServiceInfo(2) %>

            </div>
        </div>
    </div>


                </div>




        <div class="panel panel-default panel-osmm-1" runat="server" visible="false">
            <div class="panel-heading" ">
                <div class="col-xs-3 col-sm-3 col-md-2 pull-left"><i class="panel-heading-icon fa fa-area-chart"></i></div>
                <span class="local-sm-push"><%= Resources.Lang.Agency_Level %></span>
            </div>

Answer 1

将方向放在类里面应该可以解决您的问题。