Question

在下面的代码中我有一些devexpress下拉控件和一个带有devexpress DateNavigator（日历控件）控件的引导程序面板。我使用bootstrap网格来使这个响应。除日历外，所有控件都会响应。

我减少了代码，使其更具可读性

<style>
    .test {width: 225px !important;}
    .timezonecss-class {height:30px !important;}

</style>
@using System.Web.UI.WebControls
@model CareHere.WebUI.Scheduler.Models.SchedulerDataObject

@*dont add any grid classes to the row class*@
<div class="row" style="border:1px solid red;width:100%"> @*padding-left:4px;padding-top:5px;padding-right:4px;*@
    @*<div class="col-sm-12" style="border:1px solid green;">*@   @*padding:0px;width:800px;">*@
        <div class='form-group left col-sm-4' style="border:0px solid blue;padding-left:0px;padding-right:0px;width:300px;margin-left:0px;">
            <label class="form-group" for="timeZoneEdit">Time Zone</label>

            @Html.DevExpress().TimeZoneEdit(
                settings =>
                {
                    settings.Name = "timeZoneEdit";
                    settings.SchedulerName = "scheduler";
                    settings.Width = Unit.Percentage(100);
                    settings.Height = Unit.Percentage(300);
                    //settings.Attributes.CssStyle.Add("font-weight", "large");
                    settings.ControlStyle.CssClass = "timezonecss-class";
                    //settings.Width = 300;
                }).GetHtml()
        </div>

        <div class='form-group right col-sm-4' style="border:0px solid blue;padding-right:0px;padding-left:0px;width:228px;margin-left:2px;">
            <label for="timeZoneEdit">Select Clinic</label>
            @Html.Partial("_ClinicDropDownPartial", Model.Facility)
        </div>

        <div class='form-group right col-sm-4' style="border:0px solid yellow;padding-right:0px;padding-left:0px;width:228px;margin-left:1px;">
            <label for="timeZoneEdit">Select Provider</label>
            @{
                ViewBag.Resources = Model.Resources;
            }

            @Html.Partial("_ProviderDropDownPartial", Model.Provider)
        </div>

    <div class="col-sm-4">
        <div class="panel-group" id="accordion" style="border:1px solid black;padding:0px;width:120%;">
            <div class="panel panel-default" style="width: 100%; border: 1px solid red;padding:0px;">
                <div class="panel-heading" style="width: 100%; border: 1px solid green;padding:0px;">
                    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="border:0px;width:100%;margin:0px;" data-parent="#accordion">
                        <span style="float:left;">Calendar</span>
                        <span class="glyphicon glyphicon-menu-down" style="float:right"></span>
                    </button>
                </div>

                <div id="demo" class="panel-collapse collapse" style="border:1px solid orange;padding:0px;width:100%;">
                    <div class="panel-body" style="width:100%;">
                        @Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
                    </div>
                </div>
            </div>
        </div>
    </div>

    @*
    <div class="panel-group col-sm-5" id="accordion" style="border:1px solid black;padding:0px;">
        <div class="panel panel-default col-sm-5" style="width: 100%; border: 1px solid red;padding:0px;">
            <div class="panel-heading col-sm-5" style="width: 100%; border: 1px solid green;padding:0px;">
                <button type="button" class="btn btn-info col-sm-5" data-toggle="collapse" data-target="#demo" style="border:0px;width:100%;margin:0px;" data-parent="#accordion">
                    <span style="float:left;">Calendar</span>
                    <span class="glyphicon glyphicon-menu-down" style="float:right"></span>
                </button>
            </div>

            <div id="demo" class="panel-collapse collapse col-sm-5" style="border:1px solid orange;padding:0px;width:100%;">
                <div class="panel-body col-sm-5" style="width:100%;">
                    @Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
                </div>
            </div>

        </div>
    </div>*@

    </div>

<div class="row" style="padding:0px;border:0px solid black;position:relative;"id="sp1">
    <div class="col-sm-12" style="padding:5px;border:0px solid black">
        @Html.Partial("SchedulerPartial", Model)
    </div>
</div>

我有两个问题：

当浏览器大小缩小时，日历所处的div会漂浮在其他div上，如this video中所示。如何阻止此操作并将该日历div放在控件的底部（就像其他下拉控件一样）in this image it shows how it should look like
在移动所有其他下拉列表后，如何使日历移至底部（当浏览器缩小时）。我的意思是，只有在所有其他下拉菜单移动后，日历必须移动

如何阻止div漂浮在另一个上？

0 个答案: