Bootstrap: Wie kann man Text in einer bestimmten Größe nicht richtig haben?

Verwenden von Twitter Bootstrap, wenn ich die Größe meines Browsers auf die Größe XS verkleinere. Das ist meine Fußzeile. ich habe text-right -Eigenschaft, um den Rest der Bildschirmgrößen zu handhaben, aber auf XS wird sie nach dem Stapeln immer noch rechts ausgerichtet.

Wie bekomme ich das nicht hin text-right auf XS-Bildschirmgrößen?

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

Bootstrap 4 hat zu diesem Zweck neue CSS-Klassen hinzugefügt:

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

Fand dieses Juwel auf GitHub:https://github.com/twbs/bootstrap/issues/11292

Es fügt responsive Klassen für Text links und rechts hinzu

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

Sie können es einfach mit CSS umschreiben:

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

xs-Größe ist für 767px und niedrigere Auflösungen.

Im Jahr 2021 löse ich immer noch ein ähnliches Problem mit Flexbox, ohne die ursprünglichen Bootstrap-Stile zu ändern. Sieht bei jeder Bildschirmauflösung gut aus.

<div class="row" style="display: flex; justify-content: center; align-items: center;">
 <div class="col-md-6 text-right" style="align-self: center; margin: auto;">
 ...
 </div>
 <div class="col-md-6" style="align-self: center; margin: auto;">
 ...
 </div>
</div>

Sie können einen “Stil” als “Klasse” gestalten und erstellen.

29″ ultrabreit:

Handy: