從結果中拆分引導形式-有解無憂

我正在嘗試使用 Bootstrap 制作一個簡單的 Web 應用程式，它接受用戶在表單上的輸入，將其發送到資料庫，然后在表單下方的表格中回傳資料。我遇到的問題在造型方面更是如此。我的目標是將 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>

（我選擇省略默認的引導腳本/css 呼叫只是因為我覺得它可能會有點混亂）

我已經嘗試將表單包裝在其自身中<div>，然后將nothingExists <div>資料表包裝在它們自己單獨的第二個中<div>，但這也沒有用。最重要的是，當表格填滿資料時，白色背景會隨著表格延伸（理想情況下，第二個背景<div>會隨著資料延伸/將成為可滾動表格）。

這是我目前設定的 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的 s。就像我之前說的，希望解決方案非常簡單。提前致謝。

uj5u.com熱心網友回復：

使用白色背景制作表單和表格容器的兄弟姐妹，然后使用邊距來分隔它們，并使用填充來排列其中的元素，利用引導程式的幫助器（m-，p-）或添加您自己的

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

<head>
  <style>

  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/419473.html

標籤：

上一篇：Laravel7過濾器搜索：呼叫字串上的成員函式where()

下一篇：單元格內的布局錯誤