Question

＆＃13;

.menu {
	max-width: 350px;
	margin: 50px;
}

＆＃13;

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<title>Booting the mind with Bootstrap</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.2.0/jquery.min.js"></script>
    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    	<link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    	<div class="container-fluid">
    		<div class="btn-group-vertical menu">
    			<button type="button" class="btn btn-default btn-block menuitem" data-toggle="collapse" data-target="#demo">Apple</button>
    			<div id="demo" class="collapse">
    				Hello world! I am Raj. I am trying to make something. But I don't know if I could do that.
    			</div>
    			<button type="button" class="btn btn-default menuitem">Samsung</button>
    			<button type="button" class="btn btn-default menuitem">Sony</button>
    		</div>
    	</div>
    </body>
    </html>

＆＃13;

我正在尝试使用Bootstrap创建一个具有固定初始宽度的可折叠按钮菜单。我希望这个菜单能够响应。通过设置按钮组的宽度，我可以获得具有完美宽度的菜单。但是，我正在失去其响应财产。通过使用 max-width 属性替换CSS文件中的 width 属性，我将获得一个响应式菜单。但是，当菜单项展开和折叠时，菜单的宽度会发生变化。我还尝试设置宽度， max-width 和 min-width < .btn 类的/ em> 。但所有这些试验都是徒劳的。有什么方法可以实现响应性和固定宽度吗？

Answer 1

试试这个

.menu {
    width: 350px;
    margin: 50px;
}
@media only screen and (max-width: 769px) {
  .menu{
    width:25%;
  }
}

示例fiddle ..

使用Bootstrap的固定宽度的可折叠菜单

1 个答案: