- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我有一个相册应用程序,用户最多可以上传 50 张图片。我希望图片连续显示 4 张图片。相册是动态的,这意味着用户可以通过 ajax 添加和删除图片。
如果无需不断地重新调整 DOM 元素和行即可添加/删除单元格,如何使用引导网格?
例如,如果用户加载包含 5 张图片的现有相册, Bootstrap 网格如下所示:
<div class="row">
<div class="col-md-3"> a bunch of html here </div>
<div class="col-md-3"> a bunch of html here </div>
<div class="col-md-3"> a bunch of html here </div>
<div class="col-md-3"> a bunch of html here </div>
</div>
<div class="row">
<div class="col-md-3"> a bunch of html here </div>
</div>
如果用户删除图片#2,网格将是(没有第 2 行,第 5 个元素移动到第 4 个元素)
<div class="row">
<div class="col-md-3"> a bunch of html here </div>
<div class="col-md-3"> a bunch of html here </div>
<div class="col-md-3"> a bunch of html here </div>
<div class="col-md-3"> a bunch of html here </div>
</div>
然后用户添加了 2 张新图片(通过 ajax),需要一个新行和另外 2 个列。
<div class="row">
<div class="col-md-3"> a bunch of html here </div>
<div class="col-md-3"> a bunch of html here </div>
<div class="col-md-3"> a bunch of html here </div>
<div class="col-md-3"> a bunch of html here </div>
</div>
<div class="row">
<div class="col-md-3"> a bunch of html here </div>
<div class="col-md-3"> a bunch of html here </div>
</div>
bootstrap 响应式设计可以在没有行的情况下做到这一点,还是我应该只使用 float div?请记住,这些列都是通过 ajax 添加/删除的(初始页面加载除外),因此我正在操作 DOM(行/列)。为每次更改重新计算行/列会很痛苦。
最佳答案
首先,要直接回答您的问题,您只需将所有列放在一行中即可。
<div class="row">
<div class="col-md-3"> <img src="1"> </div>
<div class="col-md-3"> <img src="2"> </div>
<div class="col-md-3"> <img src="3"> </div>
<div class="col-md-3"> <img src="4"> </div>
<div class="col-md-3"> <img src="5"> </div>
...
<div class="col-md-3"> <img src="50"> </div>
</div>
每第 4 个元素(因为网格是 12 列,我们使用 3 列宽网格 = 4 列)。此外,此技术始终需要等高的列,否则您的列将不会按预期换行。因此,如果您的图片尺寸不同,并且您没有将它们缩放到适合固定高度的范围内,就会遇到一些麻烦。
这不是 Bootstrap 对上述行为的“非法”行为。事实上,您会看到 Bootstrap 网站通过在单个列上为每个屏幕尺寸类应用多个列尺寸来执行此操作,就像 Bootstrap 网站上的这个示例:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>
当以上被认为是“特小”(-xs-)时,第一行中的第一列将跨越整个宽度,而第二列将仅跨越一半宽度。
在第二行,你可以看到类似的东西。在“特小”尺寸下,您将有三个“505”宽的列,这将给您两行。
此外,您还可以看到一个示例,说明如果列行的高度不匹配,如何清除列。他们建议在 clearfix 中插入一个空的 div。
我也会考虑使用列表并建议不要过度考虑它(我发现自己在使用 Bootstrap 时会这样做)。
在这种情况下,考虑这样的事情:
<ul id="image-list" class="row">
<li class="col-sm-3"><img src="1"></li>
<li class="col-sm-3"><img src="2"></li>
...
<li class="col-sm-3"><img src="n-1"></li>
<li class="col-sm-3"><img src="n"></li>
</ul>
关于jquery - 使用具有可变单元格数量的引导网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19607851/
我已经尝试在我的 CSS 中添加一个元素来删除每三个 div 的 margin-right。不过,似乎只是出于某种原因影响了第 3 次和第 7 次。需要它在第 3、6、9 等日工作... CSS .s
如何使 div/input 闪烁或“脉冲”?例如,假设表单字段输入了无效值? 最佳答案 使用 CSS3 类似 on this page ,您可以将脉冲效果添加到名为 error 的类中: @-webk
我目前正在尝试构建一个简单的 wireframe来自 lattice 的情节包,但由沿 y 轴的数百个点组成。这导致绘图被线框网格淹没,您看到的只是一个黑色块。我知道我可以用 col=FALSE 完全
在知道 parent>div CSS 选择器在 IE 中无法识别后,我重新编码我的 CSS 样式,例如: div#bodyMain div#paneLeft>div{/*styles here*/}
我有两个 div,一个在另一个里面。当我将鼠标悬停 到最外面的那个时,我想改变它的颜色,没问题。但是,当我将鼠标悬停 到内部时,我只想更改它的颜色。这可能吗?换句话说,当 将鼠标悬停到内部 div 上
我需要展示这样的东西 有人可以帮忙吗?我可以实现以下输出 我正在使用以下代码:: GridView.builder( scrollDirection: Axis.vertical,
当 Bottom Sheet 像 Android 键盘一样打开时,是否有任何方法可以手动上推布局( ScrollView 或回收器 View 或整个 Activity )?或者你可以说我想以 Bott
我有以下代码,用于使用纯 HTML 和 CSS 显示翻转。当您将鼠标悬停在文本上时,它会更改左右图像。 在我测试的所有浏览器中都运行良好,Safari 4 除外。据我收集的信息,Safari 4 支持
我构建了某种 CMS,但在使用 TinyMCE 和 Bootstrap 时遇到了一些问题。 我有一个页面,其中概述了一个 div,如果用户单击该 div,他们可以从模态中选择图像。该图像被插入到一个
出于某种原因,当我设置一个过渡时,当我的鼠标悬停在一个元素上时,背景会改变颜色,它只适用于一个元素,但它们都共享同一个类?任何帮助我的 CSS .outer_ad { position:rel
好吧,这真的很愚蠢。我不知道 Android Studio 中的调试监视框架发生了什么。我有 1.5.1 的工作室。 是否有一些来自 intellij 的 secret 知识来展示它。 最佳答案 与以
我有这个标记: some code > 我正在尝试获取此布局: 注意:上一个和下一个按钮靠近#player 我正在尝试这样: .nextBtn{
网站:http://avuedesigns.com/index 首页有 6 个菜单项。我希望每件元素在您经过时都有自己的颜色。 这是当您将鼠标悬停在 div 上时将所有内容更改为白色的行 li#hom
我需要在 index.php 文件中显示它,但没有任何效果。我所有的文章都没有正确定位。我将其用作代码: 最佳答案 您可以首先检查您
我是一名优秀的程序员,十分优秀!