Dev Faq
10
votes

Bootstrap RTL (à droite à gauche) Groupes d'entrée

Je développe une page dans une langue RTL et Bootstrap's INPUT-Group ressemble à ceci:

Entrez la description de l'image ici

Évidemment le frontière-rayon est du mauvais côté et je peux le réparer avec CSS, mais je me demande si Bootstrap a une manière native de traiter avec elle.

Voici mon Code: xxx

2 commentaires

Il me semble bien pour moi dans ce FIDDLE , pouvez-vous nous donner votre code complet ou simplement nous donner un violon avoir la question dessus?

jsfiddle.net/vqzjowmg/1

3 Réponses :

7
votes

Vous avez tous les composants là-bas, juste dans le mauvais ordre :)

Vous voulez que votre espace soit venu avant votre élément d'entrée si vous le souhaitez sur le côté gauche de l'entrée. En outre, vous n'avez pas besoin de l'attribut dir = "rtl" code> sur le groupe d'entrée code> (code extérieur> (la DIV extérieure), uniquement sur l'élément d'entrée lui-même. P >

Vous devez donc simplement modifier votre code dans les éléments suivants: P> 

<div class="input-group">
    <span class="input-group-btn">
        <button ng-click="editor.removeQuestion(question)"
                title="Remove question"
                class="btn btn-danger">
            <span class="glyphicon glyphicon-remove"></span>
        </button>
    </span>
    <input type="text" lang="fa" dir="rtl" class="form-control"/>
</div>

0 commentaires
5
votes

Voici une solution de travail: 

 .input-group {
   direction:rtl !important;
}

.input-group-btn:last-child >.btn {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
   border-top-left-radius: 4px !important;
   border-bottom-left-radius: 4px !important;
   border-right-width:0px !important;
   border-left-width:1px !important;

}

.input-group .form-control:first-child {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;

 }

0 commentaires
1
votes

Une autre solution de travail qui a travaillé pour moi, mais celle-ci est pour Bootstrap 4. Et il n'est pas nécessaire de changer de CSS. 

<div class="input-group w-100" dir="ltr">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary" type="button" style="background-color: #fff;">
                <i class="fa fa-search"></i>
              </button>
            </div>
            <input type="text" class="form-control border-dark" placeholder="گەڕان" />

          </div>

0 commentaires

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment empêcher ou désactiver le comportement de positionnement automatique du popover Bootstrap 4 (comportement d'auto-ajustement)
Rembourrage avec ajustements sur un système de menu de la barre de navigation Bootstrap 4
Pourquoi ma ligne Bootstrap ajoute-t-elle un remplissage à mon élément?