Önyükleme: Belirli boyutta metin sağa nasıl sahip olmaz?

Question

Tarayıcımın boyutunu XS boyutuna düşürdüğümde, Twitter Bootstrap'i kullanın. Bu benim altbilgim. Ekran boyutlarının geri kalanını işlemek için text-right özelliğim var, ancak XS'de, istiflemeden sonra onu hala sağa hizalar.

XS ekran boyutlarında bunu text-right'a nasıl alabilirim?

<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

Sadece CSS kullanarak onu yeniden yazabilir:

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

xs boyut 767px ve daha düşük çözünürlükler içindir.

Answer 2

GitHub'dan bu taş bulundu: O sola metin ve sağ için duyarlı sınıfları ekler https://github.com/twbs/bootstrap/issues/11292

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

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