css - 带有表格的响应式下拉菜单
问题描述
嗨,我正在尝试在我使用 bootstrap 3 的应用程序中获取导航栏上的响应式菜单。我的菜单包含带有铃铛图标的元素。这样做的目的是提醒用户一些信息。下面我在屏幕上显示该菜单元素:
我已经固定了菜单宽度的设置。我想要响应式菜单,而不是静态的,因为这个应用程序应该在几个屏幕分辨率上工作。我应该得到什么?我试图通过 pecrentage 属性来获得它:width,min-with属性,但它已经崩溃了。
下面我展示了 html 标签和 CSS 设置:
html:
<li class="dropdown ng-isolate-scope open" loader="remainderLoading"><a ng-show="!loader" id="reminderLink" class="dropdown-toggle" data-toggle="dropdown" style="font-size:18px; cursor:pointer;" ng-click="removeNotification()" aria-expanded="true"><i class="fa fa-bell"></i></a>
<!-- ngIf: numOfRemindedNotes && !loader && !clicked -->
<div id="reminderMenu" class="dropdown-menu">
<div class="form-group col-md-7 disabled">
<label>Reminder's date:</label>
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty ng-valid-date ng-valid-required" ng-change="getNotesByDate()" initdate="new Date()" ng-click="noteDatepicker.opened = true" uib-datepicker-popup="" ng-model="dateNotes.value" is-open="noteDatepicker.opened" ng-required="true" close-text="Close" readonly="" required="required"><div uib-datepicker-popup-wrap="" ng-model="date" ng-change="dateSelection(date)" template-url="uib/template/datepickerPopup/popup.html" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty"><!-- ngIf: isOpen -->
</div>
</div>
<div ng-show="noteLoading" class="ng-hide">
<img width="32" height="32" src="/packages/img/loader.gif">
</div>
<div class="col-md-12">
<table id="reminderTable" class="table table-bordered table-striped" ng-show="!noteLoading">
<tbody>
<tr id="reminderTableElement">
<td class="col-md-3">
Case Id
</td>
<td class="col-md-3">
Trans id
</td>
<td class="col-md-3">
Type customer
</td>
<th class="col-md-3">
Note
</th>
<td class="col-md-3">
Date
</td>
<td class="col-md-3"></td>
</tr>
<!-- ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426024</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsadsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426011</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer -->
<!-- ngRepeat: note in notes.notesForAdditionalCustomers -->
</tbody>
</table>
</div>
</div>
</li>
CSS:
#reminderTableElement{
font-size: 12px;
}
#reminderMenu{
min-width: 540px;
}
我将不胜感激。此致 ;)
解决方案
您应该使用@media
标签来实现样式。例如
@media (min-width: 1600px) {
#reminder-menu {
...
}
}
首先为移动设备设计被认为是最佳实践,因此您将首先使用min-width: 540px
或最小的断点,然后根据需要添加更多断点。
推荐阅读
- visual-studio-code - “terminal.integrated.shell.windows”是 Visual Studio Code 中的折旧错误
- c# - 使用 List<>.Contains 动态 Linq 到 EF
- python - 如何在第二个窗口中复制小部件
- python - How to limit the time input to only be accpetable within a timeperiod in Python
- python - 当我输入一个整数时 Python 脚本崩溃
- bash - 用于 QuantumEspresso scf 计算的 Bash 文件
- python - 在pyspark中用平均值填充缺失值
- php - 属性 [id] 不存在 laravel
- python - 在没有 y 坐标的 Matplotlib 图中添加文本
- javascript - 根据数组对象数据创建一个新数组