Come allineare a destra in bootstrap

Durante lo sviluppo di qualsiasi applicazione, è essenziale considerare l'allineamento e la posizione adeguati dei componenti. Questo approccio aiuta gli sviluppatori a rendere l'applicazione più professionale. L'allineamento si riferisce alla disposizione degli articoli. Più specificamente, in bootstrap, diverse classi possono essere utilizzate per regolare l'allineamento dell'elemento, come "testo-destra","Float-destra", e molti altri.

Questo articolo ti istruirà su come allineare direttamente in bootstrap.

Come allineare a destra in bootstrap?

Esistono diversi modi per allineare gli oggetti a bootstrap. Alcuni di essi sono elencati di seguito:

• • Classe di galleggiante
  • giustificare il contenuto-end
  • e-end-end
  • allineare da sé
  • ML-Auto
  • testo-destra

Metodo 1: come allineare a destra in bootstrap usando la classe "float-destra"?

In bootstrap, il "Float-destra"La classe ha posizionato l'elemento sul lato destro.

Esempio

In questo esempio, useremo il "Float-destra”Classe nell'elemento“ ”:

Usando la classe float-right

Produzione

Metodo 2: come allinearsi a destra in bootstrap usando la classe "giustificate-contenuto"?

La classe Bootstrap "giustificare il contenuto-end"Viene utilizzato con oggetti flessibili. Così il "d-flex"La classe viene anche aggiunta all'elemento" ":

Utilizzando la fine del contenuto

Produzione

Metodo 3: come allinearsi a destra in bootstrap usando la classe "align-eletems-end"?

IL "e-end-end"È la classe di utilità del"allineare". Queste classi vengono utilizzate per regolare gli allineamenti degli articoli flessibili. Quindi, la classe D-Flex rende il display dell'elemento Flex. Quindi, all'interno di questo contenitore "", aggiungi altri due elementi:

Articolo 1

Produzione

Metodo 4: come allineare a destra in bootstrap usando la classe "allineate-end"?

IL "allineare da sé"La classe viene utilizzata per impostare l'allineamento dei singoli elementi a destra.

Esempio

Comprendiamo con l'aiuto dell'esempio di seguito:

• • Aggiungere un ""Elemento e assegnarlo il"d-flex" E "Flex-Column" classi.
  • All'interno dell'elemento "", specifica i tre secondari.
  • Assegna il "allineare da sé”Classe al secondo elemento“ ”:

Linea 1

Produzione

Metodo 5: come allineare a destra in bootstrap usando la classe "ML-Auto"?

IL "ML-Auto"La classe aggiunge spazio a margine a sinistra dell'elemento. Per utilizzarlo:

• • Specificare la ""Elemento con la classe" d-flex ".
  • Quindi, crea un pulsante usando "btn","btn-outline-primary", E "ML-Auto" classi:

Pulsante ML-Auto

Produzione

Metodo 6: come allineare a destra in bootstrap usando la classe "testo-destra"?

IL "testo-destra"La classe allinea il testo sul lato destro. Nell'esempio seguente, aggiungi un "

"Elemento e assegnarlo un"testo-destra" classe:

Questo testo è giusto allineato.

Produzione

Si trattava di impostare il giusto allineamento in bootstrap.

Conclusione

Vengono utilizzate più classi in bootstrap per impostare l'allineamento del testo giusto, come "Float-destra","giustificare il contenuto-end","e-end-end","allineare da sé","ML-Auto", E "testo-destra". Tuttavia, alcune lezioni funzionano sugli elementi con la visualizzazione "flettere". Questo post ha illustrato come allineare a destra in bootstrap usando più metodi.