Задать вопрос
@RedCat_ru
css

Выравнивание текста в CSS Bootstrap 4?

Приветствую. Столкнулся с такой проблемой, при изучении бутстрапа. Выравниваю текст через align-self и align-items все работает. А когда пробую ровнять текст через justify-content, то происходит ровным счетом ничего.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="css/main.css">

    <title>Bootstrap 4</title>
</head>
<body> 

    <div class="container-fluid">
        <div class="row justify-content-end">
            <div class="col">Lorem ipsum dolor sit amet.</div>
            <div class="col">Lorem ipsum dolor sit amet.</div>
            <div class="col">Lorem ipsum dolor sit amet.</div>
            <div class="col">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>


В чем может быть проблема?
  • Вопрос задан
  • 784 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
@RedCat_ru Автор вопроса
Прошу прощения, я не верно выразился. Не текст, а выравнивание блоков колонок. Дело в том, что используя флекс все выходит как надо. А в бутстрапе, атрибут justify-content-end почему-то никак не влияет совсем на блоки с текстом. Вот пример:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">

    <title>Bootstrap 4</title>
</head>
<body> 

    <div class="container">
        <div class="col">Text1</div>
        <div class="col">Text2</div>
        <div class="col">Text3</div>
        <div class="col">Text4</div>
    </div>


    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

.container
    width: 100%
    height: 150px
    background-color: #000
    color: #fff
    display: flex
    justify-content: flex-end
    .col
        margin-right: 20px


Тут все работает, блоки прижимаются к правому краю. Чертов бутстрап, ненавижу его. То ли я дурак, то ли сани не едут:) я бы его и не учил, так везде ведь требуют, хотя есть гриды и флексы, которые лучше в разы.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Сделать бэкап сайта(форума) и установить его на сервер
23 нояб. 2024, в 04:31
2000 руб./за проект
Смонтировать видео
23 нояб. 2024, в 01:31
1000 руб./за проект
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Ещё заказы