个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
看起来很简单，但我无法让这些列很好地发挥作用。
https://jsfiddle.net/talgia/xgjt15p3/5/
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid bottompad">
<div class="row">
<h2 class="moduleHeading">
Phasellus ut blandit eros</h2>
<div class="col-lg-3 col-sm-6">
<div style="padding: 5px; width:100%;">
<img alt="photo1" class="img-responsive" src="/sites/default/files/Career_square.jpg" style="width: 100%;" />
<h3 style="font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
Sed interdum</h3>
<p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum. Praesent egestas nibh at turpis tempor ultrices. </p>
<div>
<a class="btn-primary" href="/node/63">Learn more</a></div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div style="padding: 5px; width:100%;">
<img alt="photo2" class="img-responsive" src="/sites/default/files/Hope_square.jpg" style="width: 100%;" />
<h3 style="font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
Ut lobortis elementum</h3>
<p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.</p>
<div>
<a class="btn-primary" href="/node/62">Learn more</a></div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div style="padding: 5px; width:100%;">
<img alt="photo3" class="img-responsive" src="/sites/default/files/guardian_square.jpg" style="width: 100%;" />
<h3 style="font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
Ut blandit eros</h3>
<p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.</p>
<div>
<a class="btn-primary" href="/node/124">Learn more</a></div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div style="padding: 5px; width:100%;">
<img alt="photo4" class="img-responsive" src="/sites/default/files/rebound_square.jpg" style="width: 100%;" />
<h3 style="font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
Elementum tortor</h3>
<p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.</p>
<div>
<a class="btn-primary" href="/node/123">Learn more</a></div>
</div>
</div>
</div>
</div>
</body>
</html>
在“md”屏幕 View 中，一列被撞到一个新行，具体取决于上述列的伴随文本的大小。无论上面元素的文本有多长，如何让这些列元素对齐？
这是一张简化了我想要做的事情的照片。有关我遇到的问题，请参阅 jsfiddle。元素 4 被推到 MD View 中的新行，由于上述元素的高度，元素 3 正在取而代之。
最佳答案
出现这个问题的原因是columns里面的内容高度不一样。这是一篇解释它的文章:https://medium.com/wdstack/varying-column-heights-in-bootstrap-4e8dd5338643
Bootstrap 高度问题的发生是因为列 (col--) 使用 float:left。当一列“ float ”时，它会脱离文档的正常流动。它向左或向右移动，直到它触及其包含框的边缘。因此，当列高不均匀时，正确的做法是将它们堆叠到最近的一侧。
我认为最简单的事情是让所有列具有相同的高度。在我看来，Flexbox 是最好的方法，因为无论容器中的内容如何，布局都是灵活的(Bootstrap 4 已经使用了 flexbox)。您还可以简单地为所有列设置一个固定的高度值(本文提供了几种方法来做到这一点)。本文还包含更多方法。
关于html - Bootstrap 列元素调整大小碰撞到新行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51772660/
25
4
0
猫f1.txt阿曼维沙尔阿杰贾伊维杰拉胡尔曼尼什肖比特批评塔夫林现在输出应该符合上面给定的条件 最佳答案 您可以在文件读取循环中设置一个计数器并打印它， 计数=0 读取行时做 让我们数一数++ if
我正在尝试查找文件 1 和文件 2 中的共同行。如果公共(public)行存在，我想写入文件 2 中的行，否则打印文件 1 中的非公共(public)行。fin1 和 fin2 是这里的文件句柄。它读
我有这个 SQL 脚本: CREATE TABLE `table_1` ( `IDTable_1` int(11) NOT NULL, PRIMARY KEY (`IDTable_1`) );
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
如何从用户中选择user_id，SUB(row, row - 1)，其中user_id=@userid我的表用户，id 为 1、3、4、10、11、23...(不是++) --id---------u
我曾尝试四处寻找解决此问题的最佳方法，但我找不到此类问题的任何先前示例。 我正在构建一个基于超本地化的互联网购物中心，该区域分为大约 3000 个区域。每个区域包含大约 300 个项目。它们是相似的项
preg_match('|phpVersion = (.*)\n|',$wampConfFileContents,$result); $phpVersion = str_replace('"','',
我正在尝试创建一个正则表达式，使用“搜索并替换全部”删除 200 个 txt 文件的第一行和最后 10 行 我尝试 (\s*^(\h*\S.*)){10} 删除包含的前 10 行空白，但效果不佳。 最
下面的代码从数据库中获取我需要的信息，但没有打印出所有信息。首先，我知道它从表中获取了所有正确的信息，因为我已经在 sql Developer 中尝试过查询。 public static void m
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我试图在两个表中插入记录，但出现异常。您能帮我解决这个问题吗？ 首先我尝试了下面的代码。 await _testRepository.InsertAsync(test); await _xyzRepo
这个基本的 bootstrap CSS 显示 1 行 4 列: Text Text Text
如果我想从表中检索前 10 行，我将使用以下代码: SELECT * FROM Persons LIMIT 10 我想知道的是如何检索前 10 个结果之后的 10 个结果。 如果我在下面执行这段代码，
今天我开始使用 JexcelApi 并遇到了这个:当您尝试从特定位置获取元素时，不是像您通常期望的那样使用sheet.getCell(row,col)，而是使用sheet.getCell(col,ro
我正在尝试在我的网站上开发一个用户个人资料系统，其中包含用户之前发布的 3 个帖子。我可以让它选择前 3 条记录，但它只会显示其中一条。我是不是因为凌晨 2 点就想编码而变得愚蠢？ query($q)
我在互联网上寻找答案，但找不到任何答案。 (我可能问错了？)我有一个看起来像这样的表: 我一直在使用查询: SELECT title, date, SUM(money) FROM payments W
我有以下查询，我想从数据库中获取 100 个项目，但 host_id 多次出现在 urls 表中，我想每个 host_id 从该表中最多获取 10 个唯一行。 select * from urls j
我的数据库表中有超过 500 行具有特定日期。 查询特定日期的行。 select * from msgtable where cdate='18/07/2012' 这将返回 500 行。 如何逐行查询
我想使用 sed 从某一行开始打印 n 行、跳过 n 行、打印 n 行等，直到文本文件结束。例如在第 4 行声明，打印 5-9，跳过 10-14，打印 15-19 等 来自文件 1 2 3 4 5 6
我目前正在执行验证过程来检查用户的旧密码，但问题是我无法理解为什么我的查询返回零行，而预期它有 1 行。另一件事是，即使我不将密码文本转换为 md5，哈希密码仍然得到正确的答案，但我不知道为什么会发生
我是一名优秀的程序员,十分优秀！