如何使引导面板可调整大小答案

【问题标题】：How to make bootstrap panels resizeable如何使引导面板可调整大小
【发布时间】：2016-04-08 13:59:34
【问题描述】：

如何允许通过使用鼠标拖动面板页脚来更改面板高度。

我在下面的代码中尝试了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>

【问题讨论】：

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

您需要添加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>

【讨论】：

谢谢。如何通过在任何地方拖动面板页脚来调整面板大小？在此示例中，只能使用面板内容右下角调整大小。
是的。整个面板页脚可用于调整大小
它不允许改变高度小于style="height:80px"中指定的高度如何解决这个问题，以便面板内容可以调整为零高度？
如果您想在面板viralpatel.net/blogs/demo/…viralpatel.net/blogs/demo/…时调整大小，可以查看此链接
如果指定了第二个面板高度，则根本不允许调整大小。如果没有第二个面板高度，则不允许将大小调整为 0 内容高度。我把它贴在stackoverflow.com/questions/34601106/…

【解决方案2】：

如果不设置溢出，调整大小不起作用。

.panel-resizable {
  resize: vertical;
  overflow: hidden;
}

https://jsfiddle.net/qd3236no/

【讨论】：

这个小提琴不允许降低面板内容的高度。在 Internet Explorer 中，它根本不允许调整大小。如何解决这个问题？我将其作为单独的问题发布在 stackoverflow.com/questions/34601106/…

【解决方案3】：

只有在溢出设置为某个值时才能调整大小，如下所示： https://jsfiddle.net/qvw69r5L/

overflow:hidden;

【讨论】：

这个小提琴不允许降低面板高度。在 Internet Explorer 中，它不允许任何调整大小。如何解决这个问题？
Internet Explorer 不支持调整大小属性。在任何版本的 IE 中都必须使用 jQueryUI 之类的东西来实现这个效果，此时包括 Edge。