web-dev-qa-db-fra.com

Bootstrap: comment ne pas avoir de texte à droite dans une certaine taille?

En utilisant Twitter Bootstrap, lorsque je réduit la taille de mon navigateur à la taille XS. Ceci est mon pied de page. J'ai le text-right propriété pour gérer le reste des tailles d'écran, mais sur XS, il l'aligne toujours vers la droite après l'empilement.

Comment puis-je faire en sorte que cela ne soit pas text-right sur les tailles d'écran XS?

enter image description here

<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>
htmlcsstwitter-bootstrapresponsive-designtext-align
28
The Nomad

Vous pouvez simplement le réécrire en utilisant CSS:

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

la taille xs est pour les résolutions 767px et inférieures.

24
Kamil

Bootstrap 4 a ajouté de nouvelles classes css à cet effet :

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

Trouvé ce joyau sur GitHub: https://github.com/twbs/bootstrap/issues/11292

Il ajoute des classes réactives pour le texte à gauche et à droite

.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;
    }
}
33
Kevin Pei