我怎样才能让我的引导代码响应？答案

【问题标题】：how can i make my bootstrap code responsive?我怎样才能让我的引导代码响应？
【发布时间】：2021-02-26 04:19:32
【问题描述】：

我使用引导程序my task得到了这个任务

这是我尝试过的代码：

<body>    <div class="container">
        <div class="row" style="height: 300px">
            <div class="col-lg-6 col-sm-8 h2 bg-primary">1</div>
            <div class="mid w-50">
                <div class="row ml-0 pb-2" style="height: 150px">
                    <div class="col-lg-4 col-sm-6 h2 bg-success">2</div>
                    <div class="col-lg-4 col-sm-6 h2 bg-danger">3</div>
                </div>
                <div class="row ml-0" style="height: 150px">
                    <div class="col-lg-4 col-sm-6 h2 bg-warning">4</div>
                    <div class="col-lg-4 col-sm-6 h2 bg-secondary">5</div>
                </div>
            </div>
        </div>
</div>

它不起作用，这是我使用此代码得到的结果： https://snipboard.io/YVRg84.jpg

我做错了什么？我怎样才能让它像这张图片一样响应？为什么我的代码在两行之间有我无法摆脱的空间？谢谢！

【问题讨论】：

标签： html twitter-bootstrap responsive

【解决方案1】：

试试这个 -

<div class="container">
    <div class="row" style="height: 300px">
        <div class="col-lg-6 col-12 h2 bg-primary">1</div>
        <div class="mid w-50 col-12 col-lg-6 ">
            <div class="row ml-0 pb-2" style="height: 150px">
                <div class="col-lg-4 col-sm-6 h2 bg-success">2</div>
                <div class="col-lg-4 col-sm-6 h2 bg-danger">3</div>
            </div>
            <div class="row ml-0" style="height: 150px">
                <div class="col-lg-4 col-sm-6 h2 bg-warning">4</div>
                <div class="col-lg-4 col-sm-6 h2 bg-secondary">5</div>
            </div>
        </div>
    </div>

还要删除您可能错误地使用高度的间距，请在浏览器中检查您的代码并尝试 div 的高度，它将解决您的间距问题。

【讨论】：