即使样式隐藏，引导程序也保持 4 pic 一致

Question

我的代码通过引导程序有 4 张图片 但是我有隐藏一些图片的功能，而且那条线得到的图片少于 4 张 有没有办法让它们总是排成 4 列，即使我隐藏了一些， 就像替换一样，如果我向他们展示他们会作为第一个返回。

这里的简单代码： https://jsfiddle.net/7o8tfgup/1/

我有两个函数隐藏和显示

function remo(){

document.getElementById("v2").style.display = "none";
document.getElementById("v4").style.display = "none";
document.getElementById("v7").style.display = "none";
}
function remo2(){

document.getElementById("v2").style.display = "block";
document.getElementById("v4").style.display = "block";
document.getElementById("v7").style.display = "block";
}

所以如果我点击隐藏 我想看：

V1 V3 V5 V6

V8

而不是

V1 V3

V5 V6 V8

我尝试制作 js 代码以使它们到位，但我失败了。而且我删除了 div 行但没有工作。

谢谢。

Answer 1

我有updated your fiddle 让它运行。您必须调整以下几点：

1) col-ms-3 不是有效的引导类。我认为您想使用<div class="col-sm-3">（小型设备及以上）或<div class="col-3">（所有设备）。看看here

2) 如果你想解决你的问题，你不能为每一行使用<div class="row">。但是您可以创建一个父行并将所有项目放在那里。使用<div class="col-sm-3"> 或<div class="col-3"> 可确保您在row 中获得4 个项目。

<div class="row">
    <div class="col-3">
    <div class="col-3">
    <div class="col-3">
    <div class="col-3">
    <!-- row two will automatically start -->
    <div class="col-3">
    <div class="col-3">
    <div class="col-3">
    <div class="col-3">
</div>

3) 您使用document.getElementById("v2").style.display 隐藏和显示元素，但您的结构如下：

<div class="col-3"> 
    <div id="v1">

您真正想要的是隐藏/显示元素 id 的父级，因此请改用 document.getElementById("v2").parentNode.style.display。

提示：不同尺寸的图片在显示时会产生错误。您需要进一步调查并动态添加class="row"。