2016-05-10 9 views
2

アラビア語の書式を設計しようとしています。私はパネルクラスを使用しました。テキストフィールドは一般的に左側から始まりますが、フォームを右から左に設計したいと考えています。RTL言語をサポートするために、ブートストラップの列を右から左に整列させます。

.heading { 
 
    font-family: monospace; 
 
    font-size: 30px; 
 
    color: #0D91A5; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-12 "> 
 
    <center> 
 
    <h2 class="heading"> Registration</h2> 
 
    </center> 
 
</div> 
 
<div class="container" style="margin-top:30px"> 
 
    <div class="col-md-10 col-md-offset-1"> 
 
    <div class="panel panel-info" style="direction: rtl;"> 
 
     <div class="panel-heading"> 
 
     <h3 class="panel-title"><strong class="strong"> تفاصيل طالب | Executive Details</strong></h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     <div class="row"> 
 
      <div class=".col-sm-5 .col-md-6" style="direction: rtl;"> 
 
      <div class="form-group col-md-12 "> 
 
       <div class="col-md-6 col-xs-12 col-xs-12 col-md-offset-6"> 
 
       <input type="text" name="id_no" id="id_no" class="form-control" placeholder=" رقم| ID Number" tabindex="1"> 
 
       </div> 
 
       <div class="col-md-6 col-xs-12 col-md-offset-0"> 
 
       <input class="form-control" type="text" name="name" id="name" class="form-control" placeholder=" اسم| Name " tabindex="1"> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

これは私が右側に始めるが、他は別の行から同じGROMでtextfiledテキストフィールドのオフセット-6クラスを使用していますコーディングされます。同じ行にボックスフィールドが必要です。

enter image description here

誰もが私が使用したいクラスを教えてできますか?またはbootsrapのCSSファイルを変更することはできますか? (bootstrap.cssファイルの後に)bootstrap-rtl.cssを追加し、RTLのサポートに関連するすべてのCSSプロパティをオーバーライドします

<link href="css/bootstrap.css" rel="stylesheet" /> 
<link href="css/bootstrap-rtl.css" rel="stylesheet" /> 

:RTLのレイアウトを使用Bootstrap RTLを設計する

+0

右側のdivをフロートさせるプル・ライト・クラスを使用 –

+0

Plunkrで問題なく動作していますか? –

答えて

6

+0

私はフォルダ名 'bootstrap-rtl-master'を得ました。このフォルダをCSSフォルダにコピーすることはできますか? –

+0

@SayedRizwanHashmiライブラリ** bootstrap-rtl-master \ dist \ css **から 'bootstrap-rtl.css'ファイルを取り出し、それをあなたのcssフォルダにコピーし、あなたのコードにあるファイルを参照してください –

+0

はい: )ありがとうございました@Idan b brother –

関連する問題