Question

我的“提交”和“重置”按钮在卡入col-xs-12位置后停止在较小的屏幕上运行。在捕捉点之前，它们完美地运作。

为什么会这样？

以下是我的项目的链接：PinPal Web App

$(document).ready(function() {

  let initialArray = [];
  let pin = [];
  let compareArray = [];
  let success = 0;
  const numArray = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "asterisk", "0", "pound"];
  const numArray2 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "asterisk", "0", "pound"];
  const colourArray = ["red", "orange", "yellow", "green", "blue", "purple", "navy", "maroon", "lime", "teal", "gray", "olive"]

  // Remove all dynamically generated divs;
  function clearDivs() {
    for (i = 1; i < 5; i++) {
      var div = document.getElementById('row' + i);
      while (div.firstChild) {
        div.removeChild(div.firstChild);
      }
    }
  }
  // Simple function for clearing initArray * #seqience
  function clearValues() {
    initialArray = [];
    compareArray = [];
    if (!$("#submit").hasClass("unsubmitted")) {
      $("#submit").hasClass("unsubmitted");
    }
    document.getElementById('sequence').innerHTML = '';
  }

  function FisherYatesShuffle(array) {
    var currentIndex = array.length,
      temporaryValue, randomIndex;
    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }
    return array;
  }

  function specialCharacter(character) {
    var found = "";
    character === "asterisk" ? found = "*" : found = "#";
    return found;
  }
  //Add listeners to Divs each time they are dynamically created
  function addClickResponse() {
    var numberButtons = document.getElementsByClassName("numButton");

    var addListeners = function() {
      if ($("#submit").hasClass("unsubmitted")) {
        if (($(this).attr('id')) == "asterisk") {
          initialArray.push("*");
          document.getElementById("sequence").innerHTML = initialArray.join(' ').toString();
        } else if (($(this).attr('id')) == "pound") {
          initialArray.push("#");
          document.getElementById("sequence").innerHTML = initialArray.join(' ').toString();
        } else {
          initialArray.push($(this).attr('id'));
          document.getElementById("sequence").innerHTML = initialArray.join(' ').toString();
        }
      } else {
        if (($(this).attr('id')) == "asterisk") {
          initialArray.push("*");
          document.getElementById("sequence").innerHTML = compareArray.join(' ').toString();
        } else if (($(this).attr('id')) == "pound") {
          initialArray.push("#");
          document.getElementById("sequence").innerHTML = compareArray.join(' ').toString();
        } else {
          compareArray.push($(this).attr('id'));
          document.getElementById("sequence").innerHTML = compareArray.join(' ').toString();
        }
      }
    };
    for (var i = 0; i < numberButtons.length; i++) {
      numberButtons[i].addEventListener('click', addListeners, false);
    }
  }

  function addColours() {
    let randomColours = FisherYatesShuffle(colourArray);
    document.getElementById("asterisk").setAttribute("class", randomColours[10] + " " + "btn numButton btn-block btn-lg fallDown");
    document.getElementById("pound").setAttribute("class", randomColours[11] + " " + "btn numButton btn-block btn-lg fallDown");
    for (i = 0; i < randomColours.length - 2; i++) {
      document.getElementById(i).setAttribute("class", randomColours[i] + " " + "btn numButton btn-block btn-lg fallDown");
    }
  }

  function generateGrid(array) {
    var k = 0;
    for (i = 1; i < 5; i++) {
      var currentRow = $("#row" + i);
      for (j = 0; j < 3; j++) {
        var newKey = document.createElement("div");
        newKey.id = "btnDiv" + array[k];
        newKey.setAttribute("class", "col-xs-4");
        newKey.innerHTML = '<button id="' + array[k] +
          '" type="button" class="btn numButton btn-block btn-lg fallDown">' +
          (!isNaN(parseInt(array[k])) ? array[k] : specialCharacter(array[k])) + '</button>';
        $(currentRow).append(newKey);
        k++;
      }
    }
    addClickResponse();
  }

  function compare(a, b) {
    if (a.toString() == b.toString()) {
      $("#successContainer").removeClass("hidden");
      success++;
      document.getElementById("success").innerHTML = success;
      return true
    } else {
      return false;
    }
  }

  $('#submit').on("click", function() {
    if (initialArray.length === 0 && $("#submit").hasClass("unsubmitted")) {
      alert("Please enter an initial sequence of numbers");
    } else if (compareArray.length === 0 && !$("#submit").hasClass("unsubmitted")) {
      alert("Please try to re-enter the submitted sequence");
    } else if (initialArray.length !== 0 && $("#submit").hasClass("unsubmitted")) {
      pin = initialArray;
      var randomArray = FisherYatesShuffle(numArray);
      clearDivs();
      generateGrid(randomArray);
      if (document.getElementById("mode").checked) {
        addColours();
      }
      $("#submit").removeClass("unsubmitted");
      clearValues();
    } else if (compareArray.length > 0) {
      if (compare(pin, compareArray) === true) {
        clearValues()
        $("#submit").addClass("unsubmitted");
      } else {
        alert("The two pins don't match. Restarting game");
        clearDivs();
        clearValues();
        generateGrid(numArray2);
        if (document.getElementById("mode").checked) {
          addColours();
        }
        $("#submit").addClass("unsubmitted");
      }
    }
  });

  $('#restart').on("click", function() {
    $("#submit").addClass("unsubmitted");
    clearDivs();
    clearValues();
    success = 0;
    $("#successContainer").addClass("hidden");
    generateGrid(numArray2);
    if (document.getElementById("mode").checked) {
      addColours();
    }
  });

  generateGrid(numArray);
  // by default add colour
  if (document.getElementById("mode").checked) {
    addColours();
  }

  // function changeMode(){
  //   var mode = document.getElementById("mode").getAttribute("data-toggle");
  //   console.log(mode);
  //   if(document.getElementById("myCheck").checked === true){
  //     console.log("fucker");
  //   }else if(document.getElementById("myCheck").checked === false){
  //     console.log("mother");
  //   }
  // }
  // document.getElementById("mode").addEventListener("click", changeMode());
});

/*Color Classes*/

.red {
  background-color: #FF4136;
  color: white;
}

.orange {
  background-color: #FF851B;
  color: white;
}

.yellow {
  background-color: #FFDC00;
  color: white;
}

.green {
  background-color: #2ECC40;
  color: white;
}

.blue {
  background-color: #0074D9;
  color: white;
}

.purple {
  background-color: #B10DC9;
  color: white;
}

.navy {
  background-color: #001f3f;
  color: white;
}

.maroon {
  background-color: #85144b;
  color: white;
}

.lime {
  background-color: #01FF70;
  color: white;
}

.teal {
  background-color: #39CCCC;
  color: white;
}

.gray {
  background-color: #AAAAAA;
  color: white;
}

.olive {
  background-color: #3D9970;
  color: white;
}

.btn {
  opacity: 0.8;
}

.btn:hover {
  opacity: 1;
  color: white;
}

.btn:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#sequence {
  color: black;
}

p {
  font-size: 5em;
}

.numButton {
  font-size: 3em;
  border: 1em;
}

h1 {
  font-size: 5em;
}

.nonNum {
  margin-bottom: 1em;
  z-index: 101;
}

body {
  background-image: url("WhiteBackground.png");
  color: black;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  min-height: 800px;
}


/*ANIMATIONS*/

.fallDown {
  animation: fallDown .7s linear, fadeIn .4s ease-in;
}

@keyframes fallDown {
  0% {
    transform: translateY(400px);
    animation-timing-function: ease-out;
  }
  60% {
    transform: translateY(-50px);
    animation-timing-function: ease-in;
  }
  80% {
    transform: translateY(10px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="//gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>

<h1 class="text-center">Pin Pal</h1>
<br />
<!-- Where Dymanically Created Keypad Will Reside -->
<div class="container text-center">
  <div id="row1" class="row">
  </div>
  <br />
  <div id="row2" class="row">
  </div>
  <br />
  <div id="row3" class="row">
  </div>
  <br />
  <div id="row4" class="row">
  </div>
</div>


<br />
<!--  Submit Button and Live Feedback-->
<div class="container text-center">
  <div class="row">
    <div class="col-md-4 col-sm-12">
      <p id=sequence>

      </p>
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <button id="submit" type="button" class="nonNum btn btn-lg btn-success btn-block unsubmitted">Submit</button>
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <button id="restart" type="button" class="nonNum btn btn-lg btn-danger btn-block">Restart</button>
    </div>
    <div class="col-md-4 col-sm-12">
      <input id="mode" type="checkbox" data-size="large" checked data-toggle="toggle" data-on="Hard" data-off="Easy" data-onstyle="danger" data-offstyle="success">
    </div>
  </div>
</div>

<div id=successContainer class="container text-center hidden">
  <div class="row">
    <div class="col-xs-12">
      <p>Successes</p>
      <p id=success></p>
    </div>
  </div>
</div>

查看CodePen。

Answer 1

您错过了xs-size的设置，导致您的div重叠（并隐藏按钮）。

尝试：

<div class="row">
    <div class="col-md-4 col-sm-12">
      <p id="sequence">    
      </p>
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <button id="submit" type="button" class="nonNum btn btn-lg btn-success btn-block unsubmitted">Submit</button>
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <button id="restart" type="button" class="nonNum btn btn-lg btn-danger btn-block">Restart</button>
    </div>
    <div class="col-md-4 col-sm-12 col-xs-12">
        <div class="toggle btn btn-danger btn-lg" data-toggle="toggle" style="width: 145.031px; height: 68px;"><input id="mode" type="checkbox" data-size="large" checked="" data-toggle="toggle" data-on="Hard" data-off="Easy" data-onstyle="danger" data-offstyle="success" wtx-context="64FB0AC3-FF8C-41C8-83F2-30513615AA83"><div class="toggle-group"><label class="btn btn-danger btn-lg toggle-on">Hard</label><label class="btn btn-success btn-lg active toggle-off">Easy</label><span class="toggle-handle btn btn-default btn-lg"></span></div></div>
    </div>
  </div>

请注意在持有切换的div上添加了col-xs-12。

Answer 2

将“position：relative”添加到style.css的“nonNum”类中。这应该有用。

.nonNum{
    position : relative;
}

自行调整大小后，Bootstrap按钮不可点击

2 个答案: