Невозможно сделать Bootstrap столбцов одинаковой высоты - PullRequest
Новая
       34

Невозможно сделать Bootstrap столбцов одинаковой высоты

0 голосов
/ 12 апреля 2020

Я использую Bootstrap4 для своего личного сайта и не могу сделать столбцы одинаковой высоты. Я искал решения здесь , но решения, похоже, не работают с моим кодом. Буду признателен за любой вклад. 

<!-- Start projects section--->
<div id="projects"  class="offset">

    <!--- start jumbotron -->
    <div class="jumbotron">
        <div class="col-12 text-center">
            <h3 class="heading">Projects</h3>
            <div class="heading-underline"></div>
        </div>

        <div class="row">

            <div class="col-md-6 projects">
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-8 text-left">
                        <h5 class="heading project-title">The Twitter Bakery (2018) </h5>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-4">
                        <!--- image of client -->
                        <img src="img/mountains_trip.jpg" alt="image not displayed">
                    </div>
                    <div class="col-md-8">
                        <!--- text of client -->
                        <div>
                          Some words<br><br>Some more words
                        </div>
                        <hr class="projects-hr">
                        <a href="https://github.com/COM1001-ComputerScience-Sheffield/team-08" class="project-link text-center" target="_blank"><i class="fab fa-github fa-2x"></i></a>

                    </div>
                </div>
            </div>
            <div class="col-md-6 projects">
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-8 text-left">
                        <h5 class="heading project-title">Jersey Allocation (2018)</h5>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-4">
                        <!--- image of client -->
                        <img src="img/mountains_trip.jpg" alt="image not displayed">
                    </div>
                    <div class="col-md-8">
                        <!--- text of client -->
                        <div>
                           Some words.
                        </div>
                            <hr class="projects-hr">
                            <a href="https://github.com/eusoffhackers/jersey_allocation" class="project-link text-center" target="_blank"><i class="fab fa-github fa-2x"></i></a>

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


        </div>

    </div>
    <!--- end jumbotron -->

</div>

<!-- end projects section--->

Вот мой css для раздела. Правила (.row и [class * = "col-"]) скопированы из ответов, представленных в приведенной выше ссылке. 

.row{
  overflow: hidden;
}

[class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.projects img{
  width:100%;
  border-radius:10%;

}


.projects hr{
  border-top:0.05rem solid #ad7232!important;
  padding-bottom: 0.1rem;/* makes them visible in some cases*/
}

.project-link .svg-inline--fa{
  align-self: center;
  color: #505962 ;

}

.project-title{
  text-transform: uppercase;
  color: #ed9a00;

}

Так выглядит текущий раздел

...