Question

我正在尝试创建一个1行中有4列的引导程序布局，但是1列必须在正确的2列之下。

这是我想要的最终结果的屏幕截图：
End result

这就是我现在所拥有的：
Current situation

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

这是我正在使用的代码：

df.loc[len(df.index), 2] = 181
print (df)
       0      1      2      3
0  173.0  147.0  161.0  162.0
1    NaN    NaN   23.0    NaN
2    NaN    NaN  181.0    NaN

感谢您的时间！

Answer 1

使用下面的代码（您可以使用bootstrap-4间距来替换空格）：

请参见小提琴：https://jsfiddle.net/hm0z5od9/9/

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="home-teams">
    <div class="container">
        <div class="row">
            <div class="col-md-6" style="background-color: green; height: 500px;">
                1
            </div>
            <div class="col-md-6">
                <div class="row ml-md-1">
                    <div class="col-md-6" style="background-color: pink; height: 250px;">
                        2
                    </div>
                    <div class="col-md-6" style="background-color: yellow; height: 250px;">
                        3
                    </div>
                    <div class="col-md-12 mt-2 p-0">
                        <div style="background-color: black; height: 250px;">
                            4
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

您应该嵌套两个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>

或者完全放弃Bootstrap并使用display:grid属性使用纯CSS对其进行样式设置：

<div class="my-layout">
    <div id="area-1">area 1</div>
    <div id="area-2">area 2</div>
    <div id="area-3">area 3</div>
    <div id="area-4">area 4</div>
</div>

CSS：

.my-layout {
    display: grid;
    grid-column-gap: 2em;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
#area-1 { grid-area: 1 / 1 / 3 / 3 }
#area-2 { grid-area: 1 / 2 / 2 / 3 }
#area-3 { grid-area: 1 / 3 / 2 / 4 }
#area-4 { grid-area: 2 / 2 / 3 / 4 }

Answer 3

尝试此代码：

<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>

注意：您不一定需要行divs

Answer 4

“ 1列4列”

要将它们保留在单个行中（允许重新排序），请禁用Bootstrap 4 flexbox，并仅在md宽度和更大的宽度上使用“浮点数” ...

<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>

https://www.codeply.com/go/8Xc2ZsbCGS

由于.d-md-block上使用了.row，因此布局仍将在移动设备上使用flexbox。

1列4列

4 个答案: