Question

我正在尝试为我的投资组合页面的“项目”部分建立一个引导网格。我想使3x3网格具有移动响应能力，并分解为2列网格和1x6网格。

问题是：在中等视口中，网格分解为不均匀的列：第一行有2个项目，下一行有1个项目，第二行有2个项目，依此类推。我希望3x3网格分解为2列网格，其中前4行有两项，最后一行有一项。

我看过类似的问题，但发现没有冲突的CSS可能会干扰引导网格系统。我使用了不同的md，sm和lg设置，但结果相同或更差。

这是我的html：

<div class="container">
    <div class="row">
        <div class="col">
            <div class="tile"></div>
        </div>
        <div class="col">
            <div class="tile"></div>
        </div>
        <div class="col">
            <div class="tile"></div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="tile"></div>
        </div>
        <div class="col">
            <div class="tile"></div>
        </div>
        <div class="col">
            <div class="tile"></div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="tile"></div>
        </div>
        <div class="col">
            <div class="tile"></div>
        </div>
        <div class="col">
            <div class="tile"></div>
        </div>
    </div>
</div>

这是我的CSS：

.tile {
  height: 200px;
  width: 150px;
  background-color: green;
  [enter image description here][1]margin-bottom: 20px;
}

这是一个代码笔，显示了具有不良效果的网格： https://codepen.io/wileybb/pen/mYXoxJ

谢谢！

Answer 1

尝试像这样删除每行：

还将宽度值添加到列中确实可以帮助您实现所需的布局。

#include<iostream>
#include<string>

using namespace std;

int main()
{
    int N;

    cout << "Enter N: ";
    cin  >> N;

    cout << string(N, "Well Done");

    return 0;
}

小提琴示例：

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
    </div>
</div>

.tile {
  height: 200px;
  width: 150px;
  background-color: green;
  margin-bottom: 20px;
}

引导网格未分解为偶数列

1 个答案: