Question

我正在尝试获得50/50的布局，一半的行填充图片，一半的行包含文本。目前，它可以在台式机，笔记本电脑和平板电脑上使用。不过，在移动设备上（堆叠起来时），由于某种原因，图像不在行的一半。

有人可以解释为什么吗？

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);
}

谢谢！

Answer 1

您使用col-md-6，当屏幕宽度大于992px时，该div分配每个div占用六列。只需使用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>

Answer 2

这应该有效，您的响应类的对象是中级（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>

引导程序：堆叠的列不相等

2 个答案: