@RedCat_ru

Выравнивание текста в 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>


В чем может быть проблема?
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ответы на вопрос 2
Ну так вы ничего и не делаете с текстом, вы пытаетесь выровнить блоки растянутые на допустимое свободное пространство прижимая их к правому краю. Нужно вот это применять к самому тексту. Советую изучить сначала верстку голую, а потом уже применять библиотеки в большей степени не нужные)
Ответ написан
@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


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

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

Войти через центр авторизации
Похожие вопросы