如何使引導程序面板可調整大小

如何允許通過使用鼠標拖動面板頁腳來更改面板高度。如何使引導程序面板可調整大小

我在下面的代碼中嘗試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。 –

如何使引導程序面板可調整大小

回答

相關問題