如何使Bootstrap面板可调整大小

Question

如何使Bootstrap面板可调整大小

6

如何允许拖拽面板底部以更改面板高度。

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

- Andrus

3个回答

5

如果不设置溢出属性，调整大小将无法生效。

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

https://jsfiddle.net/qd3236no/

- Sean Wessell

这个代码片段不允许减小面板内容的高度。在Internet Explorer中，它根本不允许调整大小。如何解决这个问题？我已经在http://stackoverflow.com/questions/34601106/how-to-allow-to-resize-panel-content-height-to-0?lq=1上发布了一个单独的问题。 - Andrus

0

只有在设置了overflow属性时才能进行调整大小，像这样： https://jsfiddle.net/qvw69r5L/

overflow:hidden;

- Andrew Adam

这个代码片段不允许减小面板高度。在Internet Explorer中，它不允许任何调整大小。如何解决这个问题？ - Andrus

Internet Explorer不支持resize属性。您必须使用类似jQueryUI的东西来实现这个效果在任何版本的IE中，包括Edge在内的当前版本。 - Jason Conville

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- elreeda · Accepted Answer

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