Question

我有代码通过引导程序在行中有4张图片但是我有隐藏一些图片的功能，并且因为cuz行少于4个图片即使我隐藏了一些，有没有办法使它们始终排在第4位，像replace一样，如果我给他们看，他们会以camback为第一个。

简单的代码在这里： 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"。

引导程序即使样式隐藏也可以保持4张图片一致

1 个答案: