Bootstrap: come non avere il testo giusto in certe dimensioni?

Question

Utilizzo di Twitter Bootstrap, quando riduco le dimensioni del mio browser alle dimensioni XS. Questo è il mio footer. Ho la proprietà text-right per gestire il resto delle dimensioni dello schermo, ma su XS, lo allinea ancora a destra dopo l'impilamento.

Come si ottiene che questo non sia text-right sulle dimensioni dello schermo XS?

<footer> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-6 col-sm-6 col-xs-12 copyright"> 
       <p>&copy; 2014 LFDate. All rights reserved.</p> 
      </div> 
      <div class="col-md-6 col-sm-6 col-xs-12"> 
       <ul class="list-inline text-right"> 
        <li><p><a href="#">Blog</a></p></li> 
        <li><p><a href="#">Press</a></p></li> 
        <li><p><a href="#">Jobs</a></p></li> 
        <li><p><a href="#">Contact</a></p></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</footer> 

Answer 1

si può semplicemente riscrivere usando i CSS:

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

dimensioni xs per risoluzioni 767px e inferiori.

Answer 2

trovato questo gioiello su GitHub: https://github.com/twbs/bootstrap/issues/11292

Aggiunge classi reattive per il testo a destra ea sinistra

.text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg { 
    text-align: left; 
} 
.text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg { 
    text-align: center; 
} 
.text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg { 
    text-align: right; 
} 
.text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg { 
    text-align: justify; 
} 

@media (max-width: 767px) { 
    .text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs { 
     text-align: inherit; 
    } 
    .text-left-xs { 
     text-align: left; 
    } 
    .text-center-xs { 
     text-align: center; 
    } 
    .text-right-xs { 
     text-align: right; 
    } 
    .text-justify-xs { 
     text-align: justify; 
    } 
} 
@media (min-width: 768px) and (max-width: 991px) { 
    .text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm { 
     text-align: inherit; 
    } 
    .text-left-sm { 
     text-align: left; 
    } 
    .text-center-sm { 
     text-align: center; 
    } 
    .text-right-sm { 
     text-align: right; 
    } 
    .text-justify-sm { 
     text-align: justify; 
    } 
} 
@media (min-width: 992px) and (max-width: 1199px) { 
    .text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md { 
     text-align: inherit; 
    } 
    .text-left-md { 
     text-align: left; 
    } 
    .text-center-md { 
     text-align: center; 
    } 
    .text-right-md { 
     text-align: right; 
    } 
    .text-justify-md { 
     text-align: justify; 
    } 
} 
@media (min-width: 1200px) { 
    .text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg { 
     text-align: inherit; 
    } 
    .text-left-lg { 
     text-align: left; 
    } 
    .text-center-lg { 
     text-align: center; 
    } 
    .text-right-lg { 
     text-align: right; 
    } 
    .text-justify-lg { 
     text-align: justify; 
    } 
} 

Answer 3

Bootstrap 4 has added new css classes for this purpose:

<p class="text-sm-right">Right aligned text on viewports sized SM (small) or wider.</p> 
<p class="text-md-right">Right aligned text on viewports sized MD (medium) or wider.</p> 
<p class="text-lg-right">Right aligned text on viewports sized LG (large) or wider.</p> 
<p class="text-xl-right">Right aligned text on viewports sized XL (extra-large) or wider.</p>