Question

基本上我正在使用过滤器来过滤表格内容。我有四个过滤器来处理。当我使用Bootstrap时，它们会响应。但是当我将浏览器窗口的大小调整为75％宽度时，则会跳出两个列视图。在两列视图中，除了第一个下拉列表（产品）之外，所有下拉列表都正常工作。当我打开第一个下拉菜单并关闭所有其他下拉列表时，所有下拉菜单都会转移到过滤器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>

Answer 1

这是因为div是浮动的。

快速解决方案是清除第三个分区

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

Answer 2

最后我找到了解决问题的方法......

@media (max-width: 991px) {
    #medium-filters {
      clear: left;
    }
}

响应式下拉菜单未在两列视图中正确打开

2 个答案: