I'm using the Semantic UI sidebar on my page for navigation.(我将页面上的语义UI侧栏用于导航。)
By default, I'd like to have it visible with the option for the user to close it if they like.(默认情况下，我希望它显示为可见，并带有供用户根据需要关闭它的选项。) The problem is that by having the sidebar open by default, my page content gets pushed off screen and is overflowing so that part of the page is cut off.(问题是，默认情况下，通过打开侧边栏，我的页面内容被推到屏幕之外并溢出，因此页面的一部分被截断了。) Not seeing anything in the docs about making the page content conform to the available width rather than get pushed off screen.(在文档中没有看到任何有关使页面内容符合可用宽度而不是被推离屏幕的信息。)
$('.toggler').on('click', function() { $('.ui.sidebar').sidebar('toggle'); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Semantic UI Sidebar test</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css"> </head> <body> <div class="ui left sidebar inverted vertical menu visible pushable"> <a href="#" class="item">Sidebar Link</a> </div> <div class="ui pusher"> <div class="ui menu"> <a class="item toggler"> Toggle </a> <div class="item header"> Semantic UI </div> <div class="menu right"> <a href="#" class="item">Test</a> </div> </div> <div class="ui segment"> <table class="ui celled table"> <thead> <tr><th>Header</th> <th>Header</th> <th>Header</th> </tr></thead> <tbody> <tr> <td> <div class="ui ribbon label">First</div> </td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody> <tfoot> <tr><th colspan="3"> <div class="ui right floated pagination menu"> <a class="icon item"> <i class="left chevron icon"></i> </a> <a class="item">1</a> <a class="item">2</a> <a class="item">3</a> <a class="item">4</a> <a class="icon item"> <i class="right chevron icon"></i> </a> </div> </th> </tr></tfoot> </table> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script> </body> </html>
ask by kmm translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
