Bootstrap: jak nie mieć tekstu w prawo w pewnym rozmiarze?

Question

Korzystanie z Twitter Bootstrap, gdy zmniejszam rozmiar przeglądarki do rozmiaru XS. To jest moja stopka. Posiadam właściwość text-right, aby obsłużyć pozostałe rozmiary ekranu, ale na XS nadal wyrównuje ją w prawo po ułożeniu stosu.

Jak mogę to uzyskać, aby text-right na rozmiarach ekranu 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

można po prostu przepisać go za pomocą CSS:

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

Rozmiar xs jest dla rozdzielczości 767px i niższych.

Answer 2

znaleźliśmy ten klejnot na GitHub: https://github.com/twbs/bootstrap/issues/11292

Dodaje klasy reagujących na tekst po lewej i prawej stronie

.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>