个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在构建的网站的主页上有多个栏，每个栏都包含一个图标和文本。然而，在移动设备上，由于文本长度不一致，列彼此堆叠并且垂直间距不一致。有什么方法可以强制列在移动 View 中具有一致的间距？
(如果您运行以下代码片段，请按整页以查看我指的间距问题)
.info-blocks {
margin-bottom: 15px;
/* background: #efefef; */
}
.info-blocks i.icon-info-blocks {
float: left;
color: #FFEB3B;
font-size: 30px;
min-width: 50px;
margin-top: 7px;
text-align: center;
background: #002e5b;
width: 72px;
height: 72px;
padding-top: 7px;
border: 1px solid #002e5b;
border-radius: 50%;
}
.info-blocks .info-blocks-in {
padding: 0 10px;
overflow: hidden;
}
.info-blocks .info-blocks-in h3 {
color: #002e5b;
font-size: 18px;
line-height: 28px;
margin: 0px;
margin-bottom: 8px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.info-blocks .info-blocks-in p {
font-size: 14px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>
<br>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut magna eleifend, fermentum arcu et, euismod neque. Sed ante elit.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</body>最佳答案
您可以为 .info-blocks .info-blocks-in 分配一个固定的高度请参阅下面的代码片段(在不同的屏幕宽度下进行测试):
.info-blocks {
margin-bottom: 15px;
/* background: #efefef; */
}
.info-blocks i.icon-info-blocks {
float: left;
color: #FFEB3B;
font-size: 30px;
min-width: 50px;
margin-top: 7px;
text-align: center;
background: #002e5b;
width: 72px;
height: 72px;
padding-top: 7px;
border: 1px solid #002e5b;
border-radius: 50%;
}
.info-blocks .info-blocks-in {
padding: 0 10px;
height:80px;
overflow: hidden;
}
.info-blocks .info-blocks-in h3 {
color: #002e5b;
font-size: 18px;
line-height: 28px;
margin: 0px;
margin-bottom: 8px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.info-blocks .info-blocks-in p {
font-size: 14px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>
<br>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut magna eleifend, fermentum arcu et, euismod neque. Sed ante elit.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</body>关于css - Bootstrap 列间距不一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48190814/
25
4
0
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Recreating a Dictionary from an IEnumerable 在 Dictiona
是否可以使用命令行版本的 ImageMagick 修剪图像(比如带有 alpha 的 PNG)，使输出图像的宽度和高度都是偶数(不是奇数)？ 准确地说，应该先修剪输出图像，然后用透明像素填充。我需要这
我有一个订单的Map，可以由许多不同的线程访问。我想控制访问，所以考虑以下简单的数据结构+包装器。 public interface OrderContainer { boolean cont
我有以下代码，现在只是 div 中的一个 Logo ，但我正在尝试添加一些导航单元格，稍后我将对其进行样式设置。问题是，我似乎无法让它们与(除此之外) Logo “一致”，它们总是下降到下一行。我做错
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
有没有办法将种子值传递给 d3-cloud 或其他基于 javascript 的标签云，以使其在页面加载之间保持一致？ 我们的客户希望使用标签云作为导航/发现辅助工具，但由于 d3-cloud 会在每
我有一条由用户使用 D3.js 绘制的路径。 我想在我的用户绘制路径上定义一个破折号数组，但是，随着它改变其形状和长度，破折号的行为不一致并且间隙在移动并变得越来越小。 这是一个代码笔: https:
只是为了研究UINavigationBar和UIStatusBar的UI，我把Navigation Bar Style改成了Black，并且取消勾选Bar visibility，即Shows Navi
我最近在我的家用机器 (OSX 10.9) 和我的远程服务器 (Ubuntu 12.04 64 位) 上安装了 unison。 我在这两个地方都安装了 2.40.102 版本。我在我的 Mac 上使用
我正在使用 migrate 创建 SQL 数据库模式并用初始数据填充它。后来使用 SQLAlchemy 来处理这个数据库。 我如何测试我的 SQLAlchemy 模型是否与 migrate 生成的真实
道歉对这一切来说还是新鲜事。我正在创建一个网页，并在两个单独的 div 中将图像和文本并排放置。我已经设法将它们放在页面上我想要的位置，但是当我调整页面大小时，文本会调整大小，但图像不会。我希望文本底
在翻阅Cassandra和HBase的阅读资料时，我发现Cassandra并不一致，但HBase是一致的。没有找到任何合适的阅读 Material 。 有人可以提供有关此主题的任何博客/文章吗？ 最佳
我需要计算 MacOS 中文件夹的大小。该尺寸值必须与 Finder 一致。我尝试了几种方法来做到这一点。但结果总是与Finder不同。 以下方法是我尝试过的。 typedef struct{
问:我可以使用 C++ 中的任何编译时机制来自动验证模板类方法集是否从类特化到特化相匹配？ 示例:假设我想要一个类接口(interface)，它根据模板值专门化具有非常不同的行为: // forwar
我想使用 SelectKBest 选择前 K 个特征并运行 GaussianNB: selection = SelectKBest(mutual_info_classif, k=300) data_t
我想要一个位于页面中央的 div，其中包含一行(两个单词)的 h1 文本，并且该文本与 div 的长度对齐；意思是，字母留出空间(同时保持它们的大小)以占据 div 的整个宽度，并且不要超出 div。
我试图更新我的服务器，所以我通过 ssh 运行以下命令: sudo do-release-upgrade 我收到以下错误: Errors were encountered while processi
我想验证单应矩阵会给出好的结果，而这个 this answer 有答案 - 但是，我不知道如何实现答案。 那么谁能推荐我如何使用 OpenCV 计算 SVD 并验证第一个奇异值与最后一个奇异值的比率是
我最近更新到 cocoapods 0.36 并对内部规范做了一些更改，现在 podspec 不再有效。我用 0.35 验证了此规范的先前版本 (0.3.8)，但使用 0.36 失败。很明显 cocoa
我有两个并排设置的 TableView ，我需要它们同时滚动。因此，当您滚动一个时，另一个也会同时滚动。 我进行了一些搜索，但找不到任何信息，但我认为这一定是有可能的。 我的 TableView 都连
我是一名优秀的程序员,十分优秀！