引导改变弹性盒？

Question

我正在创建一个 simon 游戏，在我真正实现 bootstrap 之前它很好而且很花哨，然后我的“simon board”变得很不稳定。

违规代码：

HTML：

<div class="simon">
<button id="green" class="panel 1" type="button" disabled></button>
<button id="red" class="panel 2" type="button" disabled></button>
<button id="blue" class="panel 3" type="button" disabled></button>
<button id="yellow" class="panel 4" type="button" disabled></button>
</div>

CSS：

.panel {
  border: 2px solid white;
  opacity: .35;
  width: 200px;
  height: 200px;
  float: left;
  font-size: 22px;
  color: black;
}
.panel:hover {

  opacity: .55;
}

.simon {
  -webkit-box-shadow: 0px 0px 13px 7px rgba(0,0,0,0.58);
-moz-box-shadow: 0px 0px 13px 7px rgba(0,0,0,0.58);
box-shadow: 0px 0px 13px 7px rgba(0,0,0,0.58);
  margin: 0 auto;
  border: 5px solid black;
  border-radius 10px;
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
}

#green {
  background-color: green;
}
#red {
  background-color: red;
}
#yellow {
  background-color: yellow;
}
#blue {
  background-color: blue;
}

我唯一能想到的是 flex-wrap 可能会影响引导程序......但在这种情况下它真的不应该。无需引导程序，这个“西蒙”板看起来就很好。

我不是 bootstrap 方面的专家，但我一直在四处寻找，无法弄清楚为什么这会出错。

Answer 1

更改css代码：

.panel_new {
  border: 2px solid white;
  opacity: .35;
  width: 200px;
  height: 200px;
  float: left;
  font-size: 22px;
  color: black;
}
.panel_new:hover {

  opacity: .55;
}



<div class="simon">
     <button id="green" class="panel_new 1" type="button" disabled></button>
     <button id="red" class="panel_new 2" type="button" disabled></button>
     <button id="blue" class="panel_new 3" type="button" disabled></button>
     <button id="yellow" class="panel_new 4" type="button" disabled></button>
</div>

使用面板类引导，因此它可能与您的 css 部分发生冲突