Question

我的图像有三个col-4，这应该使它们全部排成一排，但由于某种原因，它们会堆叠起来。我试图隐藏md显示下面的内容，但.d-block似乎打破了行布局。

代码：

{{1}}

Answer 1

删除d-block。它覆盖了Bootstrap display:flex上的正常.row。如果您想要隐藏/显示响应，请使用row d-none d-md-flex。

Answer 2

为行添加了一个flex

<div class="row d-none d-md-block d-md-flex">

    <div class="col-4">
        <img class="img-fluid" src="images/website images/userResearch1.jpg" alt="User Research Qualitative Notes"/>
    </div>

    <div class="col-4">
        <img class="img-fluid" src="images/website images/userResearch2.jpg" alt="User Research Qualitative Notes"/>
    </div>

    <div class="col-4">
        <img class="img-fluid" src="images/website images/userResearch3.jpg" alt="User Research Qualitative Notes"/>
    </div> 
</div>

值得注意的是，如果没有对flex的md澄清，图像以md以下的格式出现

Bootstrap列是堆叠的，它们应该水平对齐

2 个答案: