Bootstrap: неравные столбцы на сложенных - PullRequest
Новая
       32

Bootstrap: неравные столбцы на сложенных

0 голосов
/ 18 июня 2019

Я пытаюсь получить макет 50/50, половина строки заполнена рисунком, а половина строки имеет текст. В настоящее время он работает на настольном компьютере, ноутбуке и планшете. Однако на мобильном устройстве (когда оно сложено) изображение почему-то не в половину строки.

Может кто-нибудь объяснить, почему?

https://imgur.com/a/FNTzWwE

HTML: 

<div class="container-fluid">
                <div class="row row_box grey">
                    <div class="col-md-6 padding_0">
                        <div class="homepage_imgs meats"></div>
                    </div>
                    <div class="col-md-6 homepage_text">
                        <p class="homepage_headers">Meats</p>
                        <p class="homepage_subheaders">Steak, Chicken, Fish, Burger, Eggs, Turkey</p>
                    </div>
                </div>

CSS: 

.row_box
{
    height:88vh;
    height:calc(var(--vh, 1vh) * 88);
}
.grey
{
    background-color:#e6e6e6;
}
.padding_0
{
    padding:0;
}
.order
{
    order: 2;
}
.homepage_imgs
{
  height: 100%;
  background-position: center;
  background-size: cover;
}
.meats
{
    background-image: url("beef-cuisine-cut-1881336.jpg");

.homepage_text
{
    display:flex;
    justify-content:center;
    text-align:center;
    align-items:center;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    color: #404040;
    hyphens: auto;
}
.homepage_headers
{
    font-size: calc(5em + .5vw);
    color: #e67300;
}
.homepage_subheaders
{
    font-size: calc(1.5em + .5vw);
}

Спасибо!

Ответы [ 2 ]

0 голосов
/ 18 июня 2019

Это должно работать, ваши отзывчивые классы нацелены от среднего (col-md-6) и выше.Вы должны начать с очень маленькой области просмотра.В BS4 его col- * в вашем случае должно быть col-6

<div class="col-6 padding_0">
                        <div class="homepage_imgs meats"></div>
                    </div>
                    <div class="col-6 homepage_text">
                        <p class="homepage_headers">Meats</p>
                        <p class="homepage_subheaders">Steak, Chicken, Fish, Burger, Eggs, Turkey</p>
                    </div>
0 голосов
/ 18 июня 2019

Вы используете col-md-6, который назначает каждому элементу div шесть столбцов, когда ширина экрана превышает 992px.Просто используйте col-6, так как он применяется ко всем размерам экрана. 


<div class="container-fluid">
                <div class="row row_box grey">
                    <div class="col-6 padding_0">
                        <div class="homepage_imgs meats"></div>
                    </div>
                    <div class="col-6 homepage_text">
                        <p class="homepage_headers">Meats</p>
                        <p class="homepage_subheaders">Steak, Chicken, Fish, Burger, Eggs, Turkey</p>
                    </div>
                </div>
...