Html 一行4列

我正在尝试创建一个引导布局，一行中有4列，但1列必须位于右侧的2列之下

下面是我想要的最终结果的屏幕截图：

以下是我现在所拥有的：

因此，黑色列必须位于列下方的右侧

以下是我正在使用的代码：

1.
2.
3.
4.

使用如下代码（您可以使用bootstrap-4间距到sapces）：

参见小提琴：

1.
2.
3.
4.

使用如下代码（您可以使用bootstrap-4间距到sapces）：

参见小提琴：

1.
2.
3.
4.

尝试以下代码：

<div class="home-teams">
  <div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height: 500px;">

            <!-- Left side -->
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background-color: green; height: 500px;"> 1 </div>

            <!-- Right side -->
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">

                <!-- Top Row -->
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <!-- Left -->
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background-color: pink; height: 250px;"> 2 </div>
                        <!-- Right -->
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background-color: yellow; height: 250px;"> 3 </div>
                    </div>
                </div>

                <!-- Bottom row -->
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: black; height: 250px; width: 50%;"> 4 </div>
                </div>
            </div>

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

1.
2.
3.
4.

注意：您不一定需要行div

请尝试以下代码：

<div class="home-teams">
  <div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height: 500px;">

            <!-- Left side -->
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background-color: green; height: 500px;"> 1 </div>

            <!-- Right side -->
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">

                <!-- Top Row -->
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <!-- Left -->
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background-color: pink; height: 250px;"> 2 </div>
                        <!-- Right -->
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background-color: yellow; height: 250px;"> 3 </div>
                    </div>
                </div>

                <!-- Bottom row -->
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: black; height: 250px; width: 50%;"> 4 </div>
                </div>
            </div>

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

1.
2.
3.
4.

---

注意：您不一定需要行div

您应该嵌套两个2列布局：

<div class="row">
    <div class="col-md-6">area 1<div>
    <div class="col-md-6">
        <div class="col-md-6">area 2</div>
        <div class="col-md-6">area 3</div>
        <div class="col-md-12">area 4</div>
    </div>
</div>

CSS:

---

您应该嵌套两个2列布局：

<div class="row">
    <div class="col-md-6">area 1<div>
    <div class="col-md-6">
        <div class="col-md-6">area 2</div>
        <div class="col-md-6">area 3</div>
        <div class="col-md-12">area 4</div>
    </div>
</div>

CSS:

“一行4列”

要将它们保留在一行中（允许重新排序），请禁用Bootstrap 4 flexbox，只需在

md

widths和更大的值上使用“float”

<div class="home-teams">
    <div class="container">
        <div class="row d-md-block">
            <div class="col-md-6 float-left" style="background-color: green; height: 500px;">
                1
            </div>
            <div class="col-md-3 float-left" style="background-color: pink; height: 250px;">
                2
            </div>
            <div class="col-md-3 float-left" style="background-color: yellow; height: 250px;">
                3
            </div>
            <div class="col-md-6 float-left" style="background-color: black; height: 250px; width: 50%;">
                4
            </div>
        </div>
    </div>
</div>

1.
2.
3.
4.

由于

.d-md-block

用于

.row

，因此布局仍将使用flexbox “一行4列”

要将它们保留在一行中（允许重新排序），请禁用Bootstrap 4 flexbox，只需在

md

widths和更大的值上使用“float”

<div class="home-teams">
    <div class="container">
        <div class="row d-md-block">
            <div class="col-md-6 float-left" style="background-color: green; height: 500px;">
                1
            </div>
            <div class="col-md-3 float-left" style="background-color: pink; height: 250px;">
                2
            </div>
            <div class="col-md-3 float-left" style="background-color: yellow; height: 250px;">
                3
            </div>
            <div class="col-md-6 float-left" style="background-color: black; height: 250px; width: 50%;">
                4
            </div>
        </div>
    </div>
</div>

1.
2.
3.
4.

---

由于

.d-md-block

用于

.row

，布局仍将使用flexbox告诉我更多帮助告诉我更多帮助认为您需要另一行：认为您需要另一行：