如何使引导程序面板可调整大小

如何允许通过使用鼠标拖动面板页脚来更改面板高度。如何使引导程序面板可调整大小

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

来源

2016-01-04 Andrus

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

来源

2016-01-04 21:19:13 Gintoki

谢谢。如何通过在任何地方拖动面板页脚来调整面板大小？在此示例中，调整大小只能使用面板内容右下角执行。 – Andrus

像这样http://i.imgur.com/bWYUaj8.png？ – Gintoki

是的。整个面板页脚可以用来调整大小 – Andrus

调整大小并没有设置工作溢出。

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

https://jsfiddle.net/qd3236no/

来源

2016-01-04 21:19:27

这小提琴不允许减少面板内容高度。在Internet Explorer中，它不允许调整大小。如何解决这个问题？我发布它作为单独的问题在http://stackoverflow.com/questions/34601106/how-to-allow-to-resize-panel-content-height-to-0?lq=1 – Andrus

如果溢出设置的东西，这样你只能调整： https://jsfiddle.net/qvw69r5L/

overflow:hidden;

来源

2016-01-04 21:20:40

这小提琴不允许减少面板高度。在Internet Explorer中，它不允许调整大小。如何解决这个问题？ – Andrus

Internet Explorer不支持调整大小的属性。您必须使用类似jQueryUI的功能，才能在任何版本的IE中实现此效果，包括Edge。 –

如何使引导程序面板可调整大小

回答

相关问题