用侧边栏阻止语义UI溢出内容

我在我的页面上使用Semantic UI侧边栏进行导航。默认情况下，我希望它是可见的，用户可以选择关闭它，如果他们喜欢。问题是，在默认情况下打开侧边栏，我的页面内容被推出屏幕并溢出，因此页面的一部分被切断。在文档中没有看到任何关于使页面内容符合可用宽度而不是被推出屏幕的内容。

$('.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>

查看侧边栏文档的示例部分。我认为你有两个选择:

使用<div class="ui left sidebar inverted vertical menu visible scale down">缩小内容
使侧边栏显示在使用overlay css类的内容上:<div class="ui left sidebar inverted vertical menu visible overlay">

解决这个问题的另一种方法是添加一些padding:

.pushable > .ui.fixed.menu {
  padding-left: 260px;
}
.pushable > .ui.main.container {
  padding-left: 260px;
  padding-top: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css" rel="stylesheet"/>
<div class="pushable">
  <div class="ui visible left vertical menu sidebar overlay">
    <div class="header item">Logo/Company Name</div>
    <a href="#" class="item">Link #1</a>
    <a href="#" class="item">Link #2</a>
    <a href="#" class="item">Link #3</a>
  </div>
  <div class="ui top fixed menu">
    <div class="ui fluid container">
      <div class="left menu">
        <a href="#" class="item">Menu #1</a>
        <a href="#" class="item">Menu #2</a>
      </div>
      <div class="right menu">
        <a href="#" class="item">Menu #3</a>
        <a href="#" class="item">Menu #4</a>
      </div>
    </div>
  </div>
  <div class="ui main fluid container pusher">
    <h1 class="ui header">Content</h1>
    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then </p>
  </div>
</div>

注:这个代码片段有垂直滚动的问题，因为不可能为body元素设置pushable类。

我在Semantic-UI-React中花了一些时间研究同样的问题

据我所知，Semantic-UI的侧边栏组件仅用于在移动设备上显示用于导航的临时菜单栏。它不是一个固定的仪表盘菜单。

我试过效果"叠加"缩小"推送"..而且它们都没有正确显示我的组件，我不想深入研究CSS的细节，比如"transform: translate3d"属性。

对于仪表板;我只是简单地编写了一个网格，我把一个菜单组件作为垂直的放在左边，然后把内容放在右边。

现在我正在准备一个不同的布局移动大小，将使用语义ui侧边栏

您可以保持所有其他代码相同，只需更改初始化侧边栏的方式。

// Initialize the sidebar before it's used
$('.ui.sidebar').sidebar({
    // Overlay will mean the sidebar sits on top of your content
    transition: 'overlay'
});
// Do the toggling
$('.toggler').on('click', function() {
    $('.ui.sidebar').sidebar('toggle');
});

相关内容

最新更新

热门标签：