问引导网格不会分解为偶数列
EN

Stack Overflow用户

提问于 2019-05-24 03:23:21

回答 1查看 293关注 0票数 0

我正在尝试为我的公文包页面的项目部分设置一个引导网格。我想使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

谢谢!

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-24 03:28:43

尝试删除每一行，如下所示：

此外，向列中添加宽度值可以真正帮助您实现所需的布局。

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56281745

复制

相似问题

问引导网格不会分解为偶数列
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导网格不会分解为偶数列EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导网格不会分解为偶数列
EN