Bootstrap: как не получить текстовое право в определенном размере?

Использование Twitter Bootstrap, когда я уменьшаю размер моего браузера до размера XS. Это мой нижний колонтитул. у меня есть text-right свойство для обработки остальных размеров экрана, но в XS оно все равно выравнивает его вправо после размещения.

Как я могу получить это не text-right на размерах экрана 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>
Источник

5 ответов

Решение

Вы можете просто переписать его с помощью CSS:

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

Размер xs для 767 пикселей и ниже.

Источник

Bootstrap 4 добавил новые классы CSS для этой цели:

<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>
Источник

Нашел этот драгоценный камень на GitHub: 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;
    }
}
Источник

Для Bootstrap 5 мы можем использовать предоставленные классы

      <p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

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

Источник: https://getbootstrap.com/docs/5.3/utilities/text/

Источник

В 2021 году я все еще решаю аналогичную проблему с flexbox, не меняя оригинальные стили Bootstrap. Отлично смотрится на любом разрешении экрана.

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

Вы можете стилизовать «стиль» как «класс» и создавать их.

29-дюймовый сверхширокий:

Мобильный телефон:

Источник
Другие вопросы по тегам