Question

我正在使用bootstrap网格创建当前创建宽度为4的列（因此有3列），并填充有关SQL数据库的信息。但是，当我点击网格中的特定项目时，我想要一个新的div（或其他东西）向下扩展并显示关于该主题的更多细节。我正在寻找下面演示中的内容，但是我希望网格中的所有元素都保持原样。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      font-family: Arial;
    }
    /* The grid: Three equal columns that floats next to each other */
    
    .column {
      float: left;
      width: 33.33%;
      padding: 50px;
      text-align: center;
      font-size: 25px;
      cursor: pointer;
      color: white;
    }
    
    .containerTab {
      padding: 20px;
      color: white;
    }
    /* Clear floats after the columns */
    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    /* Closable button inside the container tab */
    
    .closebtn {
      float: right;
      color: white;
      font-size: 35px;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <div style="text-align:center">
    <h2>Expanding Grid</h2>
    <p>Click on the boxes below:</p>
  </div>

  <!-- Three columns -->
  <div class="row">
    <div class="column" onclick="openTab('b1');" style="background:green;">
      Box 1
    </div>
    <div id="b1" class="containerTab" style="display:none;background:green">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <h2>Box 1</h2>
      <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
    </div>
    <div class="column" onclick="openTab('b2');" style="background:blue;">
      Box 2
    </div>
    <div id="b2" class="containerTab" style="display:none;background:blue">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <h2>Box 2</h2>
      <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
    </div>
    <div class="column" onclick="openTab('b3');" style="background:red;">
      Box 3
    </div>
    <div id="b3" class="containerTab" style="display:none;background:red">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <h2>Box 3</h2>
      <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
    </div>
    <div class="column" onclick="openTab('b3');" style="background:yellow;">
      Box 4
    </div>
    <div class="column" onclick="openTab('b3');" style="background:gray;">
      Box 5
    </div>
    <div class="column" onclick="openTab('b3');" style="background:purple;">
      Box 6
    </div>
  </div>

  <!-- Full-width columns: (hidden by default) -->


  <script>
    function openTab(tabName) {
      var i, x;
      x = document.getElementsByClassName("containerTab");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      document.getElementById(tabName).style.display = "block";
    }
  </script>

</body>

</html>

＆＃13;

Answer 1

我在这里回答了类似的问题：ExpressionEngine channel entries loop to create accordion grid with Bootstrap和Bootstrap grid with collapsed container in between

它们可以适应您的场景，但请确保使用适当的网格类（即：col-4）。

3列：https://www.codeply.com/go/6Yt0xSZdgu
4列：https://www.codeply.com/go/TLJi5MxQ1E

Answer 2

您可以将包含更多信息的元素放在列中，并将其置于绝对位置。因此所有其他列将保持原样。

我稍微修改了您的代码，点击第一个框以查看信息展开而不移动所有其他列：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      box-sizing: border-box;
    }

    .column {
      float: left;
      width: 33.33%;
      padding: 50px;
      text-align: center;
      font-size: 25px;
      cursor: pointer;
      color: white;

      position: relative;
    }

    .containerTab {
      position: absolute;
      width: 100%
      padding: 20px;
      color: white;
      z-index: 10;
      left: 0;
      top: 0;
      right: 0;
    }

    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .closebtn {
      float: right;
      color: white;
      font-size: 35px;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <div style="text-align:center">
    <h2>Expanding Grid</h2>
    <p>Click on the boxes below:</p>
  </div>

  <!-- Three columns -->
  <div class="row">
    <div class="column" onclick="openTab('b1');" style="background:green;">
      Box 1
      <div id="b1" class="containerTab" style="display:none;background:green">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <h2>Box 1</h2>
        <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
      </div>
    </div>
    <div class="column" onclick="openTab('b2');" style="background:blue;">
      Box 2
    </div>
    <div id="b2" class="containerTab" style="display:none;background:blue">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <h2>Box 2</h2>
      <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
    </div>
    <div class="column" onclick="openTab('b3');" style="background:red;">
      Box 3
    </div>
    <div id="b3" class="containerTab" style="display:none;background:red">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <h2>Box 3</h2>
      <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
    </div>
    <div class="column" onclick="openTab('b3');" style="background:yellow;">
      Box 4
    </div>
    <div class="column" onclick="openTab('b3');" style="background:gray;">
      Box 5
    </div>
    <div class="column" onclick="openTab('b3');" style="background:purple;">
      Box 6
    </div>
  </div>

  <!-- Full-width columns: (hidden by default) -->


  <script>
    function openTab(tabName) {
      var i, x;
      x = document.getElementsByClassName("containerTab");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      document.getElementById(tabName).style.display = "block";
    }
  </script>

</body>

</html>

＆＃13;

Bootstrap扩展网格

2 个答案: