gpt4 book ai didi

html - 响应式下拉菜单无法在两列 View 中正确打开

转载 作者:行者123 更新时间:2023-11-28 04:26:33 25 4
gpt4 key购买 nike

基本上我正在使用过滤器来过滤表格内容。我有四个过滤器要处理。当我使用 Bootstrap 时,它们响应迅速。但是当我将浏览器窗口的大小调整为 75% 宽度时,两列 View 就会跳入。在两列 View 中,除了第一个(产品)之外,所有下拉菜单都工作正常。当我打开第一个并关闭所有其他下拉菜单时,所有下拉菜单都移到过滤器 1 的右侧。我希望产品下拉菜单的行为类似于受众下拉菜单。 This is the product dropdown, I want it to open like audience dropdown ............ This is the audience dropdown

function showFilter(filter) {
var x = document.getElementById(filter.parentNode.childNodes[3].id);
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
.filter-button {
width: 100%;
background-color: #005387;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
vertical-align: bottom;
}

.filter-menu {
width: 100%;
height: 110px;
overflow: auto;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
padding:10px;
border: 1px solid #ddd;
}

/* attaches the filter toggles to the top of the filter boxes */
#product-filters, #language-filters, #medium-filters {
vertical-align: top;
}

/* filter menu items */
.filter-menu input {
vertical-align: top;
}

.filter-label {
font-weight: normal !important;
margin-left: 10px;
margin-bottom:7px;
}

.filter-label:before {
font-weight: normal !important;
}

.filter-box {
padding-left:500px !important;
}

.filter-menu li {
list-style-type: none;
}

.filter-parent {
margin:0;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Products Filter Menu -->

<div class = "filter-parent col-xs-12 col-sm-6 col-md-3 col" id = "product-filters">
<button class="btn btn-primary filter-button" type="button" data-toggle="dropdown" onclick="showFilter(this)">Products
<span class="caret caret-reversed"></span></button>
<ul class="filter-menu" id="productFilters">
<!--Filters load dynamically here-->
</ul>
</div>


<!-- Roles Filter Menu -->

<div class = "filter-parent col-xs-12 col-sm-6 col-md-3 col" id = "role-filters">
<button class="btn btn-primary filter-button" type="button" data-toggle="dropdown" onclick="showFilter(this)">Audiences
<span class="caret caret-reversed"></span></button>
<ul class="filter-menu" id="roleFilters">
<!--Filters load dynamically here-->
</ul>
</div>

<!-- Delivery Methods Filter Menu -->
<div class = "filter-parent col-xs-12 col-sm-6 col-md-3 col" id = "medium-filters">
<button class="btn btn-primary filter-button" type="button" data-toggle="dropdown" onclick="showFilter(this)">Delivery Methods
<span class="caret caret-reversed"></span></button>
<ul class="filter-menu" id="mediumFilters">
<!--Filters load dynamically here-->
</ul>
</div>

<!-- Languages Filter Menu -->
<div class = "filter-parent col-xs-12 col-sm-6 col-md-3 col" id = "language-filters">
<button class="btn btn-primary filter-button" type="button" data-toggle="dropdown" onclick="showFilter(this)">Languages
<span class="caret caret-reversed"></span></button>
<ul class="filter-menu" id="languageFilters">
<!--Filters load dynamically here-->
</ul>
</div>
</div> <!--end of row div-->
</div> <!-- end of filter container div -->
</body>

最佳答案

这是因为 div 是 float 的。

一个快速的解决方案是清除第三个 div

@media (min-width: 768px) {
#mediumFilters {
clear: left;
}
}

关于html - 响应式下拉菜单无法在两列 View 中正确打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41946268/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com