如何使引導面板可調整大小
[英]How to make bootstrap panels resizeable
問題描述
如何通過使用鼠標拖動面板頁腳來允許更改面板高度。
我嘗試了以下代碼的resize: vertical樣式，但不允許拖動面板頁腳。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.panel-resizable {
resize: vertical;
}
</style>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body panel-resizable" style="height:80px">
</div>
<div class="panel-footer">Band1</div>
</div>
<div class="panel panel-default">
<div class="panel-body panel-resizable">
</div>
<div class="panel-footer">Band2</div>
</div>
</body>
</html>
3 個解決方案
解決方案1
6 已采納 2016-01-04 21:19:13
您需要添加overflow: auto; （以防您要隱藏溢出內容，只需將overflow:hidden; ）在這里工作
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <style> .panel-resizable { resize: vertical; overflow: auto } </style> </head> <body> <div class="panel panel-default"> <div class="panel-body panel-resizable" style="height:80px"> </div> <div class="panel-footer">Band1</div> </div> <div class="panel panel-default"> <div class="panel-body panel-resizable"> </div> <div class="panel-footer">Band2</div> </div> </body> </html>
解決方案2
3 2016-01-04 21:19:27
如果不設置溢出，則無法調整大小。
.panel-resizable {
resize: vertical;
overflow: hidden;
}
解決方案3
0 2016-01-04 21:20:40
僅當將溢出設置為某種值時，才可以調整大小，例如： https : //jsfiddle.net/qvw69r5L/
overflow:hidden;
關於如何在jQuery中制作多個可選擇的可調整大小框的想法？
[英]Ideas on how to make multiple selectable resizeable boxes in jQuery?
如何從我可調整大小和可移動的表格的一部分制作標簽
[英]how to make as a label from a part of my form which is resizeable and movable
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.