个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我尝试创建一个显示四个客户端的网格。它在大视口(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/
25
4
0
我遇到一个问题，我的 Java 应用程序打开了太多文件。调试这个问题，我依赖于使用lsof。然而，以这种方式运行 lsof 需要太多时间(超过一分钟): lsof |grep "java" 我应该能够
textMuchLongerThan50[ document.getElementById("theElement").clientWidth 总是返回 50，这是父元素的宽度，但很明显元素的
我向我的 ViewController 询问它的 view.center 属性，并绘制一个以这个“中心”为中心的新 UIView...我得到 (160, 250) 作为响应。但是当新的 UIView
在我的项目中，我有一个在多个实体上运行以完成业务交易的工作流程。表示工作流逻辑的最佳位置是什么？目前我只是创建一个“XXXManager”，它负责与实体对象协作以完成业务交易。还有其他选择吗？ 最佳答
请考虑以下脚本；我们如何使用 python 计算 h 关于 f 的李导数？ import sympy as sym x, y, L, u , v = sym.symbols('x y L u v')
Laugh eyes and lie face [ 会笑的眼和说谎的脸] My hand will only to lead me in the end will not separ
我需要像更改 Internet Explorer ( like this ) 那样更改 Firefox 窗口标题。是否有可能或者我是否需要以某种方式安装扩展并将此设置破解到其中？ 最佳答案 安装这样的
我正在开发响应式网站，你们都知道手动缩小浏览器窗口有点不自在(而且，Firefox 不允许我在一个值后这样做)。所以我决定编写一个 jQuery“插件”来缩小带有 - 或 + 按钮的区域。 一旦我写了
在我的开发机器上，我刚刚将几条新评论推送到我的 bitbucket 帐户上的 origin/test 分支。现在我需要将该代码下载到部署机器上，所以我检查了 test 分支，如下所示: $ git c
我正在用 maven ( here ) 编写我的第一个项目。当我使用 mvn -Dtest=EchoTest test 运行测试时，我得到一个BUILD FAILURE nonAcceptedType
我正在尝试使 Bootstrap 脚手架正常工作。我有两个 table，一个在左边，一个在右边，都在 row 中。请看this fiddle . 出于某种原因，这些表格一个在 另一个下面。如何让两张
我尝试创建一个显示四个客户端的网格。它在大视口(viewport)中看起来不错，但是一旦我开始缩小窗口，事情就不会正常分解/折叠，而是彼此重叠。问题尤其出在右上角的第二个客户端框上。它似乎被 4 号框
我有一个包含不可复制句柄的 C++ 类。但是，该类必须有一个复制构造函数。因此，我实现了一个将句柄的所有权转移到新对象的方法(如下所示)， class Foo { public: Foo()
我正在尝试在光栅化 3D 点的过程中进行简单的透视投影。这是所有的矩阵和其他信息。所有矩阵都是行主矩阵。坐标系是右手坐标系。 相机位于[0,0,-1]，点位于[0,0,0](矩阵运算时w=1) 模型
我有两个给定的 CGPoints A 和 B 以及另一个从 touchesEnded 事件中获得的 CGPoint C。我想确定这三个点是否位于我使用以下给定公式的直线上:对于点 A(x1, y1)、
假设我们有两个表，分别称为表 A 和表 B在表 A 中有 fromdate 和 Todate 列，它们是员工的日期表 B 中有 f1date 、 T1date 、 empID表 A fromdate
使用Terraform 0.12，我正在S3存储桶中创建一个静态网站: ... resource "aws_s3_bucket" "www" { bucket = "example.com"
我想在js中实现这样的功能 function(arrayOfObjects, arrayOfValues, property) { /*here i want to retur
我的代码使用带有以下参数的 service.events().list() 获取日历事件: timeMax: 2015-11-13T04:12:44.263000Z timeMin: 2014-05-
MainMenu.XIB 对话框中出现警告。它说: 对象:窗口(窗口) 编号:371 类型:非法配置 问题:此窗口内容矩形并未完全位于带有菜单栏的屏幕上，并且对于所有屏幕分辨率和配置可能不完全可见。
我是一名优秀的程序员,十分优秀！