javascript - Bootstrap Grid 以错误的方式折叠 : elements lie on top of other elements-6ren

javascript - Bootstrap Grid 以错误的方式折叠 : elements lie on top of other elements

转载作者：太空宇宙更新时间：2023-11-04 08:27:46

我尝试创建一个显示四个客户端的网格。它在大视口(viewport)中看起来不错，但是一旦我开始缩小窗口，事情就不会正常分解/折叠，而是彼此重叠。问题尤其出在右上角的第二个客户端框上。它似乎被 4 号框隐藏了，但我不明白为什么。

这是一个 js fiddle :

https://jsfiddle.net/c54nfk43/

这是没有 CSS 文件的同一个 jsfiddle(同样糟糕):

https://jsfiddle.net/c54nfk43/1/

<?php include('header.php') ?>

  <body>
    <?php include('navigation.php') ?>

  <div class="container-fluid">
      <div class="row">
        <div class="col-sm-10 offset-sm-1" style="height:500px; margin-top:50px;">
          <div class="row">
            <div class="col-xs-12 col-lg-6 no-padding" style="background-color: white;">

                <div class="left_box">
                  <div class="logo_wrapper">
                    <a href="http://www.test.com">
                      <img class="client-logo" src="img/logo.png" style="width:250px; height:auto; padding-top:15px;">
                    </a>
                  </div>
                  <p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
                  <p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
                  <p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
                    <p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
                </div>
            </div>

            <div class="col-xs-12 col-lg-6 no-padding" style="background-color: #e7ecef;">
              <div class="left_box">
                <div class="logo_wrapper">
                  <a href="http://www.other.com">
                  <img class="client-logo" src="img/logo.svg" style="width:200px; height:auto;">
                  </a>
                </div>
                <p>Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. </p>

                <p>Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad.</p>

                <p>Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and.</p>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="row hidden-sm-down" style="margin: 75px;">

      </div>

      <div class="row">
        <div class="col-sm-10 offset-sm-1" style="height:500px; margin-top:50px;">


          <div class="row">
            <div class="col-xs-12 col-lg-6 no-padding" style="background-color: white;">

                <div class="left_box">
                  <div class="logo_wrapper">
                    <a href="https://www.thirdclient.de">
                    <img class="client-logo" src="img/thirdlogo.jpg" style="width:250px; height:auto; padding-top:-20px;">
                    </a>
                  </div>
                  <p>The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>
                  <p>The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>
                  <p> The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>
                    <p>The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>

                </div>
            </div>

            <div class="col-xs-12 col-lg-6 no-padding" style="background-color: #e7ecef;">
              <div class="left_box">
                <div class="logo_wrapper">
                  <a href="http://www.fourthclient.com/">
                  <img class="client-logo" src="img/fourthlogo.jpg" style="width:200px; height:auto;">
                  </a>
                </div>
                <p>Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. </p>

                <p>Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. </p>

                <p>Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. </p>
              </div>
            </div>
          </div>

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

<?php include('footer.php') ?>

最佳答案

问题是您要在 div.col-sm-10 上设置 height 属性删除它，它应该可以解决问题。

希望这对您有帮助..

关于javascript - Bootstrap Grid 以错误的方式折叠 : elements lie on top of other elements，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45030079/

文章推荐： Curl get request in C -将html数据存储在另一个文件中

文章推荐： python - 清理打印命令

文章推荐： java - Java ME 3.0 示例 midlet 中的编译错误

文章推荐： javascript - iframe 不工作

grid - 使用 grid.arrange 为使用 gridExtra::grid.arrange 制作的多个图添加标题
我必须使用 gridExtra::grid.arrange 来绘制除彼此之外的多个图，因为我使用该包来创建图的拟合。我必须使用 grid.arrange 为绘图创建一个标题。现在我想将两者结合起来
angularjs - ag-grid vs slick-grid vs angular-grid 哪个更好？
关闭。这个问题是opinion-based .它目前不接受答案。想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 4年前关闭。 Improve t
angular - AG-GRID 无法将图标按钮添加到我的 ag-grid 中的 ag-grid 和多选复选框的每一行
在我的农业网格的每一行中。我需要在每一行 ag-grid 中添加 Angular Material 图标按钮。但是，结果只显示了文本按钮。它不会在我的农业网格中显示我的图标按钮。接下来，我需要在我的
grid - KendoUI Grid 服务器分页
我正在尝试使用 JSON 数据填充 KendoUI 网格，其中服务器返回总行数以及数据，但是我在让 serverPaging 正常工作时遇到了一些问题。我创建并分配网格的数据源如下:
grid - Kendo Grid - 它自己的加载指示器
Kendo 网格在网格加载、分页、排序时自动提供自己的加载指示器。它工作正常。但我不希望显示/隐藏此内置加载指示器。如何禁用此功能？请建议我。谢谢，维诺特最佳答案很简单，只需用 CSS
grid - Deco Grid 系统发生了什么
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 11 年前。 Improve thi
grid - dojox.grid.EnhancedGrid如何设置noDataMessage？
我正在尝试将noDataMessage设置为dojox.grid.EnhancedGrid，网格工作正常，当商店获取数据时它显示它是行，没有问题，但是我需要当商店没有数据时网格将向我显示个性化消息。我
javascript - 为什么我不能使用Ext.grid.Grid？
我的 ExtJS 6 框架有问题。当我使用 Ext.grid.Panel 时它可以工作，但我想使用 Ext.grid.Grid 。 Ext.grid.Panel 和 Ext.grid.Grid 有什么
datatables - Datatable vs Angular UI Grid vs Slick Grid vs Ag-Grid
我看到有几种风格的网格。当记录很大时，人们建议使用 Angular UI Grid 而不是 Datatables。我认为数据表正在按 1 填充每一行并导致性能问题。是否无法修复类似于其他网格的数据
process - 在 Grid Engine/Sun Grid Engine/Son of Grid Engine 上使用 Docker
是否有人有在 Grid Engine/Sun Grid Engine/Son of Grid Engine 上运行 Docker 的经验，并且能够 monitor the resource used
html - CSS 网格 : grid-row/column-start/end VS grid-area + grid-template-area
我一直在阅读 CSS Grid tutorial在 CSS Tricks 中，但一个基本方面让我有点困惑。似乎有两种方法可以决定一个网格元素跨越多少个单元格: grid-template-area使
angular - 在两个单独的 ag-Grid 上使用 ag-Grid 的 sizeColumnsToFit() 时出现警告 'grid zero width'，由选项卡菜单显示
调整 ag-Grid 的大小(更改浏览器窗口的大小)并在两个选项卡之间切换时收到以下警告: ag-Grid: tried to call sizeColumnsToFit() but the grid
python - 在 Python 2.7 中，为什么 grid = [ ["A"]*5]*5 不同于 grid = [] grid.append[...]
我正在尝试在 python 2.7 中构建一个 5x5 网格的游戏板，表示为二维列表。我尝试将其写为 board = [["O"]*cols]*rows (cols 和 rows 已声明为 5)但是当
ag-grid - Ag Grid 自定义日期过滤器
AgGrid 日期筛选器的格式是mm/dd/yyyy，但我想将其更改为yyyy/mm/dd 我该怎么做？日期过滤器是网格的 columnDefinition 的一部分，我在其中使用 filter: '
ag-grid - 无法显示 ag-grid
我有一个基本的 ag-grid 和一些简单的虚拟数据，但它只在我不导入库提供的 .css 文件时显示，即使这样它也显示不正确。摘 self 的 package.json: "ag-grid": "1
ag-grid - Ag Grid - 如何将标准单元格编辑器的宽度和高度设置为单元格的全宽和高度
我有一个标准的单元格编辑器，当我处于编辑模式时，单元格编辑器的宽度和高度不是单元格的完整宽度和高度。我应该覆盖样式还是配置中有任何标志可以关闭此效果？最佳答案我有同样的问题。如果您查看 DOM，
ag-grid - 插入行而不刷新 ag-grid
概览以前在 ag-grid 版本 <10.1.0 中，可以通过这种方式在不刷新网格的情况下添加一行: let model: IRowModel = this.gridOptions.api.getM
grid - 合并 wx.Grid 中的相邻单元格
是否可以合并 wx.grid 中相邻的单元格？我的意思是水平作为一行中的单元格和垂直作为一列中的单元格。最佳答案有一种方法可以让文本跨越网格小部件中的多行或多列。 wxPython 演示中有一个名
Ng-grid 与 ui-grid
关闭。这个问题需要更多 focused .它目前不接受答案。想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 6年前关闭。 Improve this questi
grid - 在 wx.grid 中输入关键行为
谷歌搜索了很多没有任何结果...按下回车键时网格的默认行为是向下移动光标。但我必须使单元格编辑器在当前单元格中打开。我可以轻松 Hook 关键事件，但如何打开编辑器？最佳答案 import wx i

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Bootstrap Grid 以错误的方式折叠 : elements lie on top of other elements