带有表格的响应式下拉菜单

Question

您好，我正在尝试在我使用 bootstrap 3 的应用程序的导航栏上获取响应式菜单。我的菜单包含带有铃铛图标的元素。这样做的目的是提醒用户一些信息。下面我在屏幕上显示该菜单元素：

我有固定的菜单宽度设置。我想要响应式菜单，而不是静态的，因为这个应用程序应该在几个屏幕分辨率上工作。我应该得到什么？我试图通过 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;
}

我将不胜感激。最好的问候;）

Answer 1

您应该使用@media 标签来实现样式。例如

@media (min-width: 1600px) {
  #reminder-menu {
    ...
  }
}

首先针对移动设备进行设计被认为是最佳实践，因此您可以先使用min-width: 540px 或任何最小的断点，然后根据需要添加更多断点。