从结果中拆分 bootstrap 表格

Question

我正在尝试使用 Bootstrap 制作一个简单的网络应用程序，它接受用户在表单上的输入，将其发送到数据库，然后 returns 将数据存储在 table 在表格下方。我遇到的问题更多是在造型方面。我的目标是将 2 个区域分开 （查看当前设置和所需输出的图像）。

我研究了堆栈溢出和其他地方的解决方案，并尝试了这些解决方案，但到目前为止都无济于事。我希望我做错的是一件简单的事情（我感觉是这样）并且解决方案很容易解决，但我不确定。

这是我的 HTML:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css"></script>
  </head>

  <body class="container">
    <div class="logo">
        <h1 class="headline">Text Items</h1>
    </div>

    <div class="main">
        <form onsubmit="postText()">
            <div class="form-group">
              <label for="inputText">Text</label>
              <span><i class="fas fa-th-list"></i></span>
              <input type="text" class="form-control" name="inputText" id="inputText" placeholder="Enter Text ...">
            </div>
  
            
            <div class="form-group">
              <label for="inputDate">Date</label>
              <span><i class="fas fa-calendar-alt"></i></span>
              <input type="date" class="form-control" name="inputDate" id="inputDate">
            </div>
  
            <button type="submit" class="btn btn-primary" id="submission">Submit <i class="fa fa-sign-in" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-primary invisible" id="update">Update <i class="fa fa-sign-in" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-primary invisible" id="clearUpdate" onclick="clearUpdateFields()">Clear <i class="fas fa-times" aria-hidden="true"></i></button>
        </form>
        
        <br>
        <div id="nothingExists"></div>
        <br>
        <button type="submit" class="btn btn-primary" onclick="getTexts()">Get List <span><i class="fas fa-th-list"></i></span></button>
        <br>
        <br>
        <div>
          <table id="dataTable" class="table table-striped table-bordered">
            <thead>
              <th class="mySortable" onclick="sortTable(0)">Item</th>
              <th class="mySortable" onclick="sortTable(1)">Date</th>
              <th>Options</th>
            </thead>
          </table>
        </div>
    </div>
  </body>
</html>

（我选择省略默认的 bootstrap script/css 调用只是因为我觉得它会变得有点混乱）

我试过将表单包装在它自己的 <div> 中，然后 nothingExists <div> 和数据 table 在它们自己单独的第二个 <div> 但也没有用。最重要的是，当 table 被数据填充时，白色背景随着 table 拉伸（因此理想情况下，第二个 <div> 会随着 data/would 拉伸成为可滚动 table).

这是我目前设置的 CSS：

html {
    height: 100vh;
    min-width: 600px;
    background-image: linear-gradient(130deg, #FFFFFF, #1C3F80);
    background-repeat: no-repeat;
    background-size: auto;
}
body {
    width: 850px;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 50px auto;
}

.container {
    width: 850px;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 50px auto;
    font-family: 'Raleway', sans-serif;
}

.logo {
    display: flex;
    margin: auto;
    flex-direction: column;
    max-width: 500px;
    padding: 1.5rem 0;
    align-items: center;
}


form {
    margin: 0px 10px 20px 10px;
}

.main {
    padding: 20px;
}

th {
    text-align: center;
}

td {
    background-color: white;
}

.mySortable {
    cursor: pointer;
}

这是目标：

这是当前页面：

我不确定如何将它们分成 2 个单独的 div。就像我之前说的，希望解决方案非常简单。提前致谢。

Answer 1

使用bootstrap的辅助函数(m-, p-)，使表格和table容器成为白色背景的兄弟姐妹，然后使用边距来拉开它们的距离，并使用填充来排列其中的元素或添加您自己的

<!doctype html>
<html lang="en">

<head>
  <style>

  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>

<body class="container bg-info">
  <div class="logo">
    <h1 class="headline">Text Items</h1>
  </div>

  <div class="main">

    <form onsubmit="postText()" class="bg-white mb-5 p-3">
      <div class="form-group">
        <label for="inputText">Text</label>
        <span><i class="fas fa-th-list"></i></span>
        <input type="text" class="form-control" name="inputText" id="inputText" placeholder="Enter Text ...">
      </div>


      <div class="form-group">
        <label for="inputDate">Date</label>
        <span><i class="fas fa-calendar-alt"></i></span>
        <input type="date" class="form-control" name="inputDate" id="inputDate">
      </div>

      <button type="submit" class="btn btn-primary" id="submission">Submit <i class="fa fa-sign-in" aria-hidden="true"></i></button>
      <button type="button" class="btn btn-primary invisible" id="update">Update <i class="fa fa-sign-in" aria-hidden="true"></i></button>
      <button type="button" class="btn btn-primary invisible" id="clearUpdate" onclick="clearUpdateFields()">Clear <i class="fas fa-times" aria-hidden="true"></i></button>
    </form>




    <div id="nothingExists" class="bg-white p-3">

      <button type="submit" class="btn btn-primary" onclick="getTexts()">Get List <span><i class="fas fa-th-list"></i></span></button>
      <table id="dataTable" class="table table-striped table-bordered">
        <thead>
          <tr>
            <th class="mySortable" onclick="sortTable(0)">Item</th>
            <th class="mySortable" onclick="sortTable(1)">Date</th>
            <th>Options</th>
          </tr>
        </thead>

      </table>

    </div>
  </div>
</body>

</html>

从结果中拆分 bootstrap 表格

Split bootstrap form from results

html

css

forms

bootstrap-4