首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >引导网格不会分解为偶数列

引导网格不会分解为偶数列
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:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
.tile {
  height: 200px;
  width: 150px;
  background-color: green;
  [enter image description here][1]margin-bottom: 20px;
}

下面的代码显示了具有不希望看到的效果的网格:https://codepen.io/wileybb/pen/mYXoxJ

谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

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

尝试删除每一行,如下所示:

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

代码语言:javascript
复制
<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>

小提琴示例:

代码语言:javascript
复制
.tile {
  height: 200px;
  width: 150px;
  background-color: green;
  margin-bottom: 20px;
}
代码语言:javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56281745

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档