Question

我正在网站上制作一个迷你冒险游戏，想知道如何制作一个用于广告资源的叠加标签（例如以html进行组织/格式化。最好使用bootstrap 4容器/列/行/等，尽管不是必需的）？见图片代表我的意思。

（我正在使用引导程序4，如果有帮助的话）

reference image

我要寻找的是：您可以单击以打开清单，它会弹出“场景视图”。您也可以通过X或再次单击“库存”按钮来关闭库存。如果需要，您还可以打开多个库存。

这是我现在拥有的所有代码

<div class="container-fluid h-100 w-100">
        <div class="row fixed-bottom">
            <div class="col-12 w-100">
                <div class="btn-group btn-group-toggle w-100 justify-content-center" data-toggle="buttons">
                    <label class="btn btn-primary menubtn">
                        <input type="radio" name="options" id="Inv1" autocomplete="off" checked> Inv
                    </label>
                    <label class="btn btn-danger menubtn">
                        <input type="radio" name="options" id="Inv2" autocomplete="off"> Inv
                    </label>
                    <label class="btn btn-success menubtn">
                        <input type="radio" name="options" id="Inv3" autocomplete="off"> Inv
                    </label>
                    <label class="btn btn-secondary menubtn">
                        <input type="radio" name="options" id="Inv4" autocomplete="off"> Inv
                    </label>
                </div>
            </div>
        </div>
</div>

这是menubtn对于任何好奇的人的

.menubtn {width:25%;}

Answer 1

您可以使用javascript来实现此功能，单击按钮时在“无”和“阻止”之间切换菜单显示：

.jnew

function togglevisible(elem) {
  elem = document.getElementById(elem);
  if (elem.style.display == "none") {
    elem.style.display = "block";
  } else {
    elem.style.display = "none";
  }
}

#menu {
  position: absolute;
  display: none;
  left: 0;
  bottom: 25%;
}

#button {
  position: absolute;
  left: 0;
  bottom: 0;
}

Answer 2

如果确定要使用Bootstrap，则可能需要查看下拉菜单的dropup变体。它可能不是最可靠的解决方案，但我认为这是一个非常有趣的想法，因此我制作了一个Codepen并使用简单的列类进行大小调整，并对实用程序类进行了一些调整。

许多样式可能需要重写，但是当您使用Bootstrap构建自定义内容时，这可能是一个很大的缺点。就个人而言，我建议您自己制作，因为响应式网格布局很容易通过您自己的col-md-*类来实现，该类具有相对的宽度和一些媒体查询。除非有其他原因要使用Bootstrap，否则它还为您提供了更大的灵活性。但这只是我自己的看法。

Answer 3

同时玩dropup和collapse。不需要JS。

html, body {
  height: 100%;
}

.wrapper {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.content {
  margin-bottom: auto;
}

.btn-group {
  width: 100%;
}

.btn {
  border-radius: 0 !important;
}

.dropdown-menu {
  width: 100%;
}

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="wrapper">
  <div class="content">
    Content
  </div>
  <footer class="footer">
    <div class="row no-gutters">
      <div class="col">
        <div class="btn-group dropup">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="collapse" data-target="#inv1">
            Inv 1
          </button>
          <div id="inv1" class="dropdown-menu">
            <a href="#" data-toggle="collapse" data-target="#inv1" class="dropdown-header text-right">x</a>
            <a class="dropdown-item" href="#">Item 1</a>
            <a class="dropdown-item" href="#">Item 2</a>
            <a class="dropdown-item" href="#">Item 3</a>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="btn-group dropup">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="collapse" data-target="#inv2">
            Inv 2
          </button>
          <div id="inv2" class="dropdown-menu">
            <a href="#" data-toggle="collapse" data-target="#inv2" class="dropdown-header text-right">x</a>
            <a class="dropdown-item" href="#">Item 1</a>
            <a class="dropdown-item" href="#">Item 2</a>
            <a class="dropdown-item" href="#">Item 3</a>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="btn-group dropup">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="collapse" data-target="#inv3">
            Inv 3
          </button>
          <div id="inv3" class="dropdown-menu">
            <a href="#" data-toggle="collapse" data-target="#inv3" class="dropdown-header text-right">x</a>
            <a class="dropdown-item" href="#">Item 1</a>
            <a class="dropdown-item" href="#">Item 2</a>
            <a class="dropdown-item" href="#">Item 3</a>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="btn-group dropup">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="collapse" data-target="#inv4">
            Inv 4
          </button>
          <div id="inv4" class="dropdown-menu">
            <a href="#" data-toggle="collapse" data-target="#inv4" class="dropdown-header text-right">x</a>
            <a class="dropdown-item" href="#">Item 1</a>
            <a class="dropdown-item" href="#">Item 2</a>
            <a class="dropdown-item" href="#">Item 3</a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>
</body>
</html>

在其他容器和东西上创建小标签

3 个答案: