Я пытаюсь создать приложение с панелью навигации, а под панелью навигации находится поле поиска input. Я попытался использовать fixed-top, но в итоге оно скрыло поле поиска. Я думал о наличии fixed-top также в поле ввода в качестве класса, но когда я это делаю, он скрывает часть содержимого. Поэтому я пытаюсь найти лучший способ сделать это, не скрывая содержания ниже.
HTML:
<!doctype html>
<html xml="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Dashboard Temple for Bootstrap</title>
<!-- <link href="dashboard_static/dist/css/bootstrap.min.css" rel="stylesheet"> -->
<link href="css/rest.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header nav-logo">
<a class="navbar-brand" href="#"> <img alt="Logo"
src="img/logo.png" id="Logo">
</a> <label id="nav-name">Taddm Assistant</label>
</div>
</div>
</nav>
<div class="container-fluid">
<main role="main" class="col-md-8 ml-sm-auto col-lg-12 pt-3 px-4">
<div class="row">
<div class="col col-md-3 ml-auto">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search...">
</div>
</div>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>AppCode</th>
<th>Acronym</th>
<th>AppName</th>
<th>Status</th>
<th>View</th>
</tr>
</thead>
<tbody id="myTable">
<tr th:each="ary2 : ${ary2}">
<td th:text="${ary2.dtoAppCode}"></td>
<td th:text="${ary2.dtoAcro}"></td>
<td th:text="${ary2.dtoAppName}"></td>
<td th:text="${ary2.dtoGpStatus}"></td>
<td><a th:href="@{/findOne/(appcode=${ary2.dtoAppCode})}"
class="btn btn-primary eBtn">View</a></td>
</tr>
</tbody>
</table>
</main>
<!-- </div>-->
</div>
<div class="myForm">
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update or
Create</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-form-label">Application Name:</label> <input
type="text" class="form-control" id="displayAppName"
name="displayAppName" value="" readonly /> <label
class="col-form-label">Application Code:</label> <input
type="text" class="form-control" id="appcode" name="appcode"
value="" readonly /> <label class="col-form-label">Status:</label>
<input type="text" class="form-control" id="status" name="status"
value="" readonly />
</div>
</div>
<div class="modal-footer">
<a href="/edit" id="modalCreateBtn"> <input type="submit"
class="btn btn btn-primary modal-create" id="createBtn"
value="Create" /></a>
<button type="button" class="btn btn-secondary"
id="dashboardCloseModal" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="dashboard_static/dist/js/bootstrap.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
<script src="dashboard_static/dist/js/bootstrap.min.js"></script>
</body>
</html>