Bootstrap 4 равной высоты столбца - кнопки внутри не нажимают вниз - PullRequest
Новая
       1

Bootstrap 4 равной высоты столбца - кнопки внутри не нажимают вниз

0 голосов
/ 04 марта 2019

, поэтому я использую класс начальной загрузки 4 'h-100', чтобы сделать все 3 столбца равными по высоте, чтобы при увеличении данных внутри на один div все 3 div соответствовали высоте.но кнопки, которые я изначально установил в нижней части каждого элемента, теперь не совпадают с нижней частью.как сделать так, чтобы кнопки были выровнены по низу и иметь одинаковую высоту столбца

до h-100 enter image description here

послеч-100

enter image description here

мой код 

h1, h2, h3, h4, h5, h6 {
  font-family: 'Teko', sans-serif;
}
html {
  font-size: 18px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
 }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
 }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
 }
}
h1, .h1 {
  font-size: 3.815rem;
}
h2, .h2 {
  font-size: 2.441rem;
}
h3, .h3 {
  font-size: 1.563rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Teko', sans-serif;
}
.threecol-teaser-cardWrap .threecol-teaser-card a {
  text-decoration: none;
  color: #000;
}
.threecol-teaser-cardWrap .threecol-teaser-card h3 {
  padding: 1.953rem;
}
.threecol-teaser-cardWrap .threecol-teaser-card p.card-text {
  padding: 1.953rem 1.953rem 0.953rem 1.953rem;
}
.threecol-teaser-cardWrap .threecol-teaser-card hr {
  border: 0;
  border-top: 1px solid #d4272e;
  width: 30%;
  margin: 0;
  transition: width 250ms ease-in-out 0s;
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover hr {
  width: 100%;
  -webkit-transition: ease-out 0.2s;
  -moz-transition: ease-out 0.2s;
  transition: ease-out 0.2s;
}
.threecol-teaser-cardWrap .threecol-teaser-card .threecol-teaser-bottomText {
  width: 100%;
  text-align: left;
  border-radius: 0px;
  padding: 0.953rem 1.953rem 1.563rem 1.953rem;
  color: #d4272e;
  box-shadow: inset 0 0 0 0 #d4272e;
  -webkit-transition: ease-out 0.2s;
  -moz-transition: ease-out 0.2s;
  transition: ease-out 0.2s;
}
.threecol-teaser-cardWrap .threecol-teaser-card .threecol-teaser-bottomText .ion-ios-arrow-thin-right {
  position: relative;
  top: 4px;
  display: inline-block;
  padding-right: 1rem;
  padding-left: 0.5rem;
  font-family: Ionicons, sans-serif;
  font-size: 150%;
  transition: transform 300ms ease-in-out 0s;
  transform: translateX(8px) translateY(0px) translateZ() scaleX(1.25) scaleY(1.25) scaleZ(1);
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover .threecol-teaser-bottomText {
  box-shadow: inset 0 100px 0 0 #d4272e;
  color: #fff;
  background-color: #d4272e;
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover .threecol-teaser-bottomText .ion-ios-arrow-thin-right {
  transition: transform 300ms ease-in-out 0s;
  transform: translateX(8px) translateY(0px) translateZ(0px) scaleX(1.25) scaleY(1.25) scaleZ(1);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 
    <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://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./style/index.css">
</head>

<body>

    <section class="threecol-teaser-cardWrap py-10">
        <div class="container">
            <div class=" mb-8">
                <div class="text-left mb-8">
                    <h2>
                        Title
                    </h2>
                </div>
                <div class="Benefits-Card">
                    <div class="row">
                        <div class="threecol-teaser-card col-lg-4 mb-6">
                            <a href="">
                                <div class="border border-primary ">
                                    <h3 class="">
                                        title 1
                                    </h3>
                                    <hr>

                                    <p class="card-text">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?

                                    </p>
                                    <div class="threecol-teaser-bottomText ">

                                        button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>

                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="threecol-teaser-card col-lg-4 mb-6">
                            <a href="">
                                <div class="border border-primary ">
                                    <h3 class="">
                                        title 1
                                    </h3>
                                    <hr>

                                    <p class="card-text">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?
                                        rum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?

                                    </p>
                                    <div class="threecol-teaser-bottomText">

                                        button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>

                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="threecol-teaser-card col-lg-4 mb-6">
                            <a href="">
                                <div class="border border-primary ">
                                    <h3 class="">
                                        title 1
                                    </h3>
                                    <hr>

                                    <p class="card-text">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?

                                    </p>
                                    <div class="threecol-teaser-bottomText">

                                        button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>

                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

</body>

</html>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 04 марта 2019

Как я знаю, когда вы используете Bootstrap, а затем меняете стиль с помощью CSS для основных тегов (например, h1, h2, div), он будет влиять на все ваши оригинальные стили, которые приходят из начальной загрузки, одно из возможных решений - дать каждомупометьте уникальный идентификатор или класс OR, затем измените его, во-вторых, вы можете использовать функцию, чтобы игнорировать любые другие конфликты в CSS, такие как: 

*{
   box-sizing: border-box;
}

, о которых вы можете прочитать Lagacy CSS Conflicts

0 голосов
/ 04 марта 2019

Вы можете добиться необходимого эффекта, просто используя классы начальной загрузки.

Необходимые изменения:

  1. Добавьте h-100 класс к вашим картам
  2. Сделайтеflex-контейнеры столбца карточек, добавив классы d-flex и flex-column
  3. Добавьте автоматическое нижнее поле, используя класс mb-auto, к тексту непосредственно перед кнопкой, чтобы кнопка была нажата до конца контейнера

Результаты показаны во фрагменте ниже: 

h1, h2, h3, h4, h5, h6 {
  font-family: 'Teko', sans-serif;
}
html {
  font-size: 18px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
 }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
 }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
 }
}
h1, .h1 {
  font-size: 3.815rem;
}
h2, .h2 {
  font-size: 2.441rem;
}
h3, .h3 {
  font-size: 1.563rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Teko', sans-serif;
}
.threecol-teaser-cardWrap .threecol-teaser-card a {
  text-decoration: none;
  color: #000;
}
.threecol-teaser-cardWrap .threecol-teaser-card h3 {
  padding: 1.953rem;
}
.threecol-teaser-cardWrap .threecol-teaser-card p.card-text {
  padding: 1.953rem 1.953rem 0.953rem 1.953rem;
}
.threecol-teaser-cardWrap .threecol-teaser-card hr {
  border: 0;
  border-top: 1px solid #d4272e;
  width: 30%;
  margin: 0;
  transition: width 250ms ease-in-out 0s;
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover hr {
  width: 100%;
  -webkit-transition: ease-out 0.2s;
  -moz-transition: ease-out 0.2s;
  transition: ease-out 0.2s;
}
.threecol-teaser-cardWrap .threecol-teaser-card .threecol-teaser-bottomText {
  width: 100%;
  text-align: left;
  border-radius: 0px;
  padding: 0.953rem 1.953rem 1.563rem 1.953rem;
  color: #d4272e;
  box-shadow: inset 0 0 0 0 #d4272e;
  -webkit-transition: ease-out 0.2s;
  -moz-transition: ease-out 0.2s;
  transition: ease-out 0.2s;
}
.threecol-teaser-cardWrap .threecol-teaser-card .threecol-teaser-bottomText .ion-ios-arrow-thin-right {
  position: relative;
  top: 4px;
  display: inline-block;
  padding-right: 1rem;
  padding-left: 0.5rem;
  font-family: Ionicons, sans-serif;
  font-size: 150%;
  transition: transform 300ms ease-in-out 0s;
  transform: translateX(8px) translateY(0px) translateZ() scaleX(1.25) scaleY(1.25) scaleZ(1);
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover .threecol-teaser-bottomText {
  box-shadow: inset 0 100px 0 0 #d4272e;
  color: #fff;
  background-color: #d4272e;
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover .threecol-teaser-bottomText .ion-ios-arrow-thin-right {
  transition: transform 300ms ease-in-out 0s;
  transform: translateX(8px) translateY(0px) translateZ(0px) scaleX(1.25) scaleY(1.25) scaleZ(1);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 
    <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://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./style/index.css">
</head>

<body>

    <section class="threecol-teaser-cardWrap py-10">
        <div class="container">
            <div class=" mb-8">
                <div class="text-left mb-8">
                    <h2>
                        Title
                    </h2>
                </div>
                <div class="Benefits-Card">
                    <div class="row">
                        <div class="threecol-teaser-card col-lg-4 mb-6">
                            <a href="">
                                <div class="border border-primary h-100 d-flex flex-column">
                                    <h3 class="">
                                        title 1
                                    </h3>
                                    <hr>

                                    <p class="card-text  mb-auto">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?

                                    </p>
                                    <div class="threecol-teaser-bottomText ">

                                        button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>

                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="threecol-teaser-card col-lg-4 mb-6">
                            <a href="">
                                <div class="border border-primary  h-100 d-flex flex-column">
                                    <h3 class="">
                                        title 1
                                    </h3>
                                    <hr>

                                    <p class="card-text mb-auto">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?
                                        rum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?

                                    </p>
                                    <div class="threecol-teaser-bottomText">

                                        button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>

                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="threecol-teaser-card col-lg-4 mb-6">
                            <a href="">
                                <div class="border border-primary  h-100 d-flex flex-column">
                                    <h3 class="">
                                        title 1
                                    </h3>
                                    <hr>

                                    <p class="card-text mb-auto">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?

                                    </p>
                                    <div class="threecol-teaser-bottomText">

                                        button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>

                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

</body>

</html>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...