Как заставить текст не нажимать кнопку sh вниз, когда он переполняет 2-ю строку? - PullRequest
Новая
       14

Как заставить текст не нажимать кнопку sh вниз, когда он переполняет 2-ю строку?

0 голосов
/ 25 февраля 2020

У меня есть текст на карточке bootstrap, и под ним есть кнопка. Каждый раз, когда я изменяю размер страницы, баланс между одной картой с меньшим количеством текста и другой с большим количеством текста нарушается. В основном кнопка на карте 2 нажата больше, потому что там больше строк текста, чем на карте 3, и кнопки сбалансированы с отступами.

Я попытался исправить это с помощью Bootstrap 'text-justify, но это только делает текст до go до возможного конца, и текст по-прежнему перетекает в другую строку. Я попытался найти решение, но обнаружил, что есть только стиль, позволяющий сделать текст исчезающим, например «Привет, я ...», когда он переполняет выбранное количество строк.

Как мне сбалансировать кнопки для всех остаются на одной линии друг с другом независимо от количества строк?

Вот мой код: 


 <section id="avaiable">
            <div class="container-fluid shorter pt-4 pb-2 bg-white text-justify">
                <!--Benefit cards-->
                <div class="row">
                    <!--Student programs card-->
                    <div class="col-md-6 col-lg-4 my-3 mx-auto">
                        <div class="card">
                            <img src="images/student.jpg" alt="student programs" class="card-img-top border-radius rounded-top rounded-bottom">
                            <div class="card-body">
                                <h4 class="card-title font-proximanova-bold">Student programs</h4>
                                <p class="card-text">
                                <h5 class="pb-3 color-grey font-proximanova-light">Discover more about student programs that help you get in touch with employers.</h5>
                                <a href="" class="btn btn-crimson">
                                    <h6 class="pt-2 px-4 button-text-bigger text-white font-proximanova-light">Find out more</h6>
                                </a>

                            </div>
                        </div>
                    </div>
                    <!--Student programs card-->
                    <!--Community engagement card-->
                    <div class="col-md-6 col-lg-4 my-3 mx-auto">
                        <div class="card">
                            <img src="images/community.jpg" alt="community engagement" class="card-img-top border-radius rounded-top rounded-bottom">
                            <div class="card-body">
                                <h4 class="card-title font-proximanova-bold">Community engagement</h4>
                                <p class="card-text">
                                <h5 class="pb-3 color-grey font-proximanova-light">We engage and listen to our community, we value people who want to do their best.</h5>
                                <a href="" class="btn btn-crimson">
                                    <h6 class="pt-2 px-4 button-text-bigger text-white font-proximanova-light">Find out more</h6>
                                </a>

                            </div>
                        </div>
                    </div>
                    <!--End of community engagement card-->
                    <!--Invention & innovation card-->
                    <div class="col-md-6 col-lg-4 my-3 mx-auto">
                        <div class="card">
                            <img src="images/innovation.jpg" alt="invention and innovation" class="card-img-top border-radius rounded-top rounded-bottom">
                            <div class="card-body">
                                <h4 class="card-title font-proximanova-bold">Invention & innovation</h4>
                                <p class="card-text">
                                <h5 class="pb-3 color-grey font-proximanova-light">There are no limits to your inventions, got idea for a new project in mind? Share it right away!</h5>
                                <a href="" class="btn btn-crimson">
                                    <h6 class="pt-2 px-4 button-text-bigger text-white font-proximanova-light">Find out more</h6>
                                </a>

                            </div>
                        </div>
                    </div>
                    <!--End of invention & innovation card-->
                </div>
                <!--End of benefit cards-->
            </div>
        </section>

Конечная цель состоит в том, чтобы кнопки оставались на одной линии друг с другом.

...