- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Bootstrap 4,并尝试创建一个包含 12 个图标的(响应式)行。
<div class="app-container">
<div class="row">
<div class="col-md-1">
<a class="" href="https://www.xxx.org.au">
<img class="" src="/images/web-1.png" alt="">
</a>
</div>
... x 12
</div>
</div>
“app-container”类有一个样式属性:
.app-container {
width:1050px;
}
在宽屏幕上,图标保持在一行中。
但是随着窗口宽度的减小,我希望图标开始落入第二行(从右端的图标开始)一次一个。
目前它们只是保持原样,因为后面的东西宽度减小了。(它们基本上看起来像是溢出到它们所在的容器之外。它们没有流动性/响应性)。
见下文:
最佳答案
最简单的解决方案是使用 Bootstrap 4 中内置的类。
http://www.codeply.com/go/MvnOs3GPCC
<div class="app-container">
<div class="row">
<div class="col-1">
<a class="" href="https://www.xxx.org.au">
<img class="" src="//placehold.it/60" alt="">
</a>
</div>
<div class="col-1">
<a class="" href="https://www.xxx.org.au">
<img class="" src="//placehold.it/60" alt="">
</a>
</div>
<div class="col-1">
<a class="" href="https://www.xxx.org.au">
<img class="" src="//placehold.it/60" alt="">
</a>
</div>
<div class="col-1">
<a class="" href="https://www.xxx.org.au">
<img class="" src="//placehold.it/60" alt="">
</a>
</div>
<div class="col-1">
<a class="" href="https://www.xxx.org.au">
<img class="" src="//placehold.it/60" alt="">
</a>
</div>
<div class="col-1">
<a class="" href="https://www.xxx.org.au">
<img class="" src="//placehold.it/60" alt="">
</a>
</div>
<div class="col-1">
<a class="" href="https://www.xxx.org.au">
<img class="" src="//placehold.it/60" alt="">
</a>
</div>
<div class="col-1">
<a class="" href="https://www.xxx.org.au">
<img class="" src="//placehold.it/60" alt="">
</a>
</div>
<div class="col-1">
<a class="" href="https://www.xxx.org.au">
<img class="" src="//placehold.it/60" alt="">
</a>
</div>
<div class="col-1">
<a class="" href="https://www.xxx.org.au">
<img class="" src="//placehold.it/60" alt="">
</a>
</div>
<div class="col-1">
<a class="" href="https://www.xxx.org.au">
<img class="" src="//placehold.it/60" alt="">
</a>
</div>
<div class="col-1">
<a class="" href="https://www.xxx.org.au">
<img class="" src="//placehold.it/60" alt="">
</a>
</div>
</div>
</div>
只需在每个 col-1
上设置一个 min-width
。不要使用 col-md-1
,因为它们会全部堆叠在 992px
而不是“一次一个”。
关于html - Bootstrap - 流到第二行的图标行(做出响应),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43278953/
我创建了一个库项目,然后构建它,获取 .aar 并解压缩它。获取包含库的 classes.jar 文件,并将其添加到另一个项目中。该项目识别我的文件,我可以从中调用方法和函数。我的问题是我尝试从我的库
这不是现实世界的问题,我只是想了解如何创建 promise 。 我需要了解如何为不返回任何内容的函数做出 promise ,例如 setTimeout。 假设我有: function async(ca
我是 Promise 的新手。我写了两个例子: 第一个是: new RSVP.Promise(function (resolve, reject) { setTimeout(function
我有一个 nodejs (express) 作为服务器端,一个 angular 6 作为客户端。在服务器中我有中间件功能,可以进行 session 检查。如果 session 无效或不存在,我想向客户
我有一个 nodejs (express) 作为服务器端,一个 angular 6 作为客户端。在服务器中我有中间件功能,可以进行 session 检查。如果 session 无效或不存在,我想向客户
我有四个 I/O 操作:A、B、C 和 D。它们中的每一个都应该使用 vertx.executeBlocking 来执行。我应该有以下行为: //PSEUDOCODE waitForExecuteBl
我是一名优秀的程序员,十分优秀!