Twitter bootstrap testo-centro quando in modalità xs

Ho HTML come: -Twitter bootstrap testo-centro quando in modalità xs

<footer> 
<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 text-left"> 
      <p> 
       &copy; 2015 example.com. All rights reserved. 
      </p> 
     </div> 
     <div class="col-xs-12 col-sm-6 text-right"> 
      <p> 
       <a href="#"><i class="fa fa-facebook"></i></a> 
       <a href="#"><i class="fa fa-twitter"></i></a> 
       <a href="#"><i class="fa fa-google-plus"></i></a> 
      </p> 
     </div> 
    </div> 
</div> 
</footer>

Dal codice si può vedere che il testo della colonna sono lasciati e allineato a destra, rispettivamente. Comunque nella modalità xs mi piace che siano allineati al centro. Come posso farlo usando twitter bootstrap?

fonte

2015-04-10 Dipendra Gurung

duplicati di http://stackoverflow.com/questions/18602121/change-text-align-responsively-with-bootstrap-3 – Lee

https://github.com/twbs/bootstrap/issues/21698 –

Non c'è nulla di integrato nel bootstrap per questo, ma alcuni semplici css potrebbero risolverlo. Qualcosa del genere dovrebbe funzionare. Non testato se

@media (max-width: 768px) { 
     .col-xs-12.text-right, .col-xs-12.text-left { 
       text-align: center; 
     } 
    }

fonte

2015-04-10 13:33:57 loddn

Ho dovuto aggiungere! Importante che questa correzione funzionasse come Bootstrap aveva un testo di sinistra! Importante. Il collegamento –

@media (max-width: 767px) { 
    footer .text-right, 
    footer .text-left { 
     text-align: center; 
    } 
}

Ho aggiornato @ risposta di loddn, facendo due cambiamenti

max-width di xs schermi in bootstrap è 767px (768px è l'inizio di sm schermi)
(questo uno è una questione di preferenza) Ho usato footer invece di col-* in modo che se la larghezza delle colonne cambia, il CSS non ha bisogno di essere aggiornato.

fonte

2015-04-10 13:44:53

allineamento testo Responsive è stato aggiunto in Bootstrap V4:

https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment

Per sinistra, destra, e allineamento centrale, classi reattivi sono disponibili che utilizzano gli stessi punti di interruzione larghezza finestra come griglia sistema.

<p class="text-xs-center">Center aligned text on all viewport sizes.</p>

fonte

2016-08-07 08:07:45 Jarrod

restituisce 404. Verrà effettuato un aggiornamento quando viene risolto: D –

_Aha._ https://github.com/twbs/bootstrap/issues/21698 –

https: //v4-alpha.getbootstrap.com/utilities/typography/# text-alignment –

Css parte è:

CSS:

@media (max-width: 767px) { 

    // Align text to center. 
    .text-xs-center { 
    text-align: center; 
    } 
}

E la parte HTML sarà (questo testo centro di lavoro solo al di sotto 767px di larghezza)

HTML :

<div class="col-xs-12 col-sm-6 text-right text-xs-center"> 
     <p> 
      <a href="#"><i class="fa fa-facebook"></i></a> 
      <a href="#"><i class="fa fa-twitter"></i></a> 
      <a href="#"><i class="fa fa-google-plus"></i></a> 
     </p> 
</div>

fonte

2016-10-03 11:58:09

Questa è la risposta più elegante in quanto non modifica le classi esistenti ma ne aggiunge una nuova, significativa. –

Questa è una cattiva risposta. Bootstrap utilizza il primo principio mobile. Una query multimediale con larghezza massima non segue questo semplice principio. Dovrebbe essere qualcosa di simile al centro del testo con una combinazione di text-sm-right. Sempre al centro del testo e dai dispositivi sm alla giusta posizione –

Questo è stato taggato come bootstrap 3, ma forse questo sarà utile: In Bootstrap 4.0.0 (non beta): All'interno della classe col, utilizzare

<div class="col text-center text-md-left">

"text-center "centra il testo per tutte le dimensioni della finestra, quindi aggiunge" text-md-left "o" text-md-right "per cambiarlo sopra sm. Potresti renderlo "text-sm-left", "text-lg-left" o qualsiasi altra cosa. Ma averlo impostato per centrare sempre prima lo imposta.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
<body> 
<footer> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 text-center text-md-left"> 
     <p> 
      &copy; 2015 example.com. All rights reserved. 
     </p> 
     </div> 
     <div class="col-xs-12 col-sm-6 text-center text-md-right"> 
     <p> 
      <a href="#"><i class="fa fa-facebook"></i></a> 
      <a href="#"><i class="fa fa-twitter"></i></a> 
      <a href="#"><i class="fa fa-google-plus"></i></a> 
     </p> 
     </div> 
    </div> 

     </div> 

</footer> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 
</body>

fonte

2018-01-26 06:03:36 grahamlander

Twitter bootstrap testo-centro quando in modalità xs

risposta

Problemi correlati